如何触发触摸事件？答案

【问题标题】：How to trigger a touch event?如何触发触摸事件？
【发布时间】：2014-11-04 20:39:39
【问题描述】：

让我们从一些事件监听器开始：

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;
}

&lt;div id="playground"&gt;&lt;/div&gt;

为了让浏览器将触摸事件解释为最终用户发出的触摸事件，我缺少什么设置？本质上，我希望浏览器滚动响应一系列以编程方式触发的触摸开始、移动和结束事件。

【问题讨论】：

document.createTouch() 是deprecated。现在你必须使用Touch 接口。 Witch 似乎还没有在著名的浏览器中实现。

标签： javascript safari webkit

【解决方案1】：

我不确定我是否正确理解了您的问题，但是如果您从页面顶部开始触摸并向下拖动，您正在尝试将页面滚动到顶部并且它已经存在，那么为什么要触发滚动。也许从位置{pageX: 0, pageY: 100} 开始，到{pageX: 0, pageY: 0} 结束，然后看看它是否仍然不起作用。

问候，KJ。

【讨论】：