如何觸發觸摸事件？

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。