如何觸發觸摸事件？

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。