터치 이벤트를 트리거하는 방법은 무엇입니까?

Question

몇 가지 이벤트 리스너로 시작하자 :

window.addEventListener('scroll', function (e) { 
    console.log('scroll', e); 
}); 
window.addEventListener('touchstart', function (e) { 
    console.log('touchstart', e); 
}); 
window.addEventListener('touchmove', function (e) { 
    console.log('touchmove', e); 
}); 
window.addEventListener('touchend', function (e) { 
    console.log('touchend', e); 
}); 

내가 프로그래밍, 위치 {pageX: 0, pageY: 0}에서 문서를 터치 {pageX: 0, pageY: 100}로 이동하고 터치 이벤트를 종료해야합니다.

이렇게하려면 지정된 요소에서 터치 이벤트를 트리거하는 도우미 함수 TouchEvent을 작성하겠습니다.

/** 
* @see https://gist.github.com/sstephenson/448808 
* @see https://developer.apple.com/library/iad/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html 
* @see http://stackoverflow.com/questions/18059860/manually-trigger-touch-event 
*/ 
function touchEvent (element, type, identifier, pageX, pageY) { 
    var e, 
     touch, 
     touches, 
     targetTouches, 
     changedTouches; 

    touch = document.createTouch(window, element, identifier, pageX, pageY, pageX, pageY); 

    if (type == 'touchend') { 
     touches = document.createTouchList(); 
     targetTouches = document.createTouchList(); 
     changedTouches = document.createTouchList(touch); 
    } else { 
     touches = document.createTouchList(touch); 
     targetTouches = document.createTouchList(touch); 
     changedTouches = document.createTouchList(touch); 
    } 

    e = document.createEvent('TouchEvent'); 
    e.initTouchEvent(type, true, true, window, null, 0, 0, 0, 0, false, false, false, false, touches, targetTouches, changedTouches, 1, 0); 

    window.dispatchEvent(e); 
}; 

필자는 문서가로드되고 이전에 동의 한 시나리오를 나타내는 터치 이벤트를 발송할 것입니다. 예상

document.addEventListener('DOMContentLoaded', function() { 
    var identifier = new Date().getTime(), 
     element = document, 
     i = 0; 

    touchEvent(element, 'touchstart', identifier, 0, 0); 
    while (i++ < 100) { 
     touchEvent(element, 'touchmove', identifier, 0, i); 
    } 
    touchEvent(element, 'touchend', identifier, 0, i); 
}); 

는 touchstart, touchmove 및 touchend 이벤트가 트리거 된 것입니다. 예상치 못한 것은 scroll 이벤트가 트리거되지 않았으며 문서의 실제 "터치"가 현재 문서에 반영되지 않았기 때문입니다.

내 설치는 사람들이 최종 사용자에 의해 발행 된 것처럼 브라우저가 터치 이벤트를 해석하기 위해없는 무엇

window.addEventListener('scroll', function (e) { 
 
    console.log('scroll', e); 
 
}); 
 
window.addEventListener('resize', function (e) { 
 
    console.log('resize', e); 
 
}); 
 
window.addEventListener('touchstart', function (e) { 
 
    console.log('touchstart', e); 
 
}); 
 
window.addEventListener('touchmove', function (e) { 
 
    console.log('touchmove', e); 
 
}); 
 
window.addEventListener('touchend', function (e) { 
 
    console.log('touchend', e); 
 
}); 
 

 
/** 
 
* @see https://gist.github.com/sstephenson/448808 
 
* @see https://developer.apple.com/library/iad/documentation/UserExperience/Reference/TouchEventClassReference/TouchEvent/TouchEvent.html 
 
* @see http://stackoverflow.com/questions/18059860/manually-trigger-touch-event 
 
*/ 
 
function touchEvent (element, type, identifier, pageX, pageY) { 
 
    var e, 
 
     touch, 
 
     touches, 
 
     targetTouches, 
 
     changedTouches; 
 
    
 
    if (!document.createTouch) { 
 
     throw new Error('This will work only in Safari browser.'); 
 
    } 
 

 
    touch = document.createTouch(window, element, identifier, pageX, pageY, pageX, pageY); 
 
    
 
    if (type == 'touchend') { 
 
     touches = document.createTouchList(); 
 
     targetTouches = document.createTouchList(); 
 
     changedTouches = document.createTouchList(touch); 
 
    } else { 
 
     touches = document.createTouchList(touch); 
 
     targetTouches = document.createTouchList(touch); 
 
     changedTouches = document.createTouchList(touch); 
 
    } 
 

 
    e = document.createEvent('TouchEvent'); 
 
    e.initTouchEvent(type, true, true, window, null, 0, 0, 0, 0, false, false, false, false, touches, targetTouches, changedTouches, 1, 0); 
 

 
    window.dispatchEvent(e); 
 
}; 
 

 
document.addEventListener('DOMContentLoaded', function() { 
 
    var identifier = new Date().getTime(), 
 
     element = document, 
 
     i = 0; 
 

 
    touchEvent(element, 'touchstart', identifier, 0, 0); 
 
    while (i++ < 100) { 
 
     touchEvent(element, 'touchmove', identifier, 0, i); 
 
    } 
 
    touchEvent(element, 'touchend', identifier, 0, i); 
 
});

#playground { 
 
    background: #999; height: 5000px; 
 
}

<div id="playground"></div>

? 본질적으로, 나는 프로그래밍 방식으로 촉발 된 일련의 터치 시작, 이동 및 종료 이벤트에 대한 응답으로 브라우저가 스크롤 할 것으로 기대하고 있습니다.

Answer 1

질문을 올바르게 이해할 수 있을지 모르겠지만 페이지 맨 위에서 터치하고 페이지를 스크롤하려고 할 때 이미 스크롤 막대를 사용해야하는 이유는 무엇입니까? 아마도 {pageX: 0, pageY: 100} 위치에서 시작하여 {pageX: 0, pageY: 0}에 끝나면 여전히 작동하지 않는지 확인하십시오.

안부, KJ.