如何在Chrome 41中以编程方式创建TouchEvent？

Question

我正在尝试为单元测试创​​建触摸事件.阅读https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent后,我希望我能做到:

document.createEvent('TouchEvent');

但我得到这个错误:

未捕获的DOMException:无法在'Document'上执行'createEvent':提供的事件类型('TouchEvent')无效.

我看到在启用触摸的浏览器上创建和触发触摸事件？,这似乎也表明createEvent()是要走的路.

我也尝试通过构造函数创建事件,该函数适用于MouseEvent和WheelEvent:

new window.TouchEvent()

但我也在这里得到一个错误:

未捕获的TypeError:非法构造函数

我尝试使用Firefox 36,但基于http://caniuse.com/#search=touch,我并不惊讶地看到:

NotSupportedError:不支持操作

跑完之后

document.createEvent('TouchEvent')

Firefox中没有window.TouchEvent构造函数,这也不足为奇了.

我有什么想法我做错了吗？

Answer 1

我不知道它是否适用于其他浏览器,但在chrome中你可以做类似的事情

/* eventType is 'touchstart', 'touchmove', 'touchend'... */
function sendTouchEvent(x, y, element, eventType) {
  const touchObj = new Touch({
    identifier: Date.now(),
    target: element,
    clientX: x,
    clientY: y,
    radiusX: 2.5,
    radiusY: 2.5,
    rotationAngle: 10,
    force: 0.5,
  });

  const touchEvent = new TouchEvent(eventType, {
    cancelable: true,
    bubbles: true,
    touches: [touchObj],
    targetTouches: [],
    changedTouches: [touchObj],
    shiftKey: true,
  });

  element.dispatchEvent(touchEvent);
}

const myElement = document.getElementById('foo')

sendTouchEvent(150, 150, myElement, 'touchstart');
sendTouchEvent(220, 200, myElement, 'touchmove');
sendTouchEvent(220, 200, myElement, 'touchend');

测试给定浏览器是否支持Touch和TouchEvent

if (typeof Touch !== 'undefined' &&
    typeof TouchEvent !== 'undefined' &&
    Touch.length === 1 &&
    TouchEvent.length === 1) {
       sendTouchEvent(200, 200, myElement, 'touchmove');
}

请参阅Touch和TouchEvent构造函数

Answer 2

看起来像

document.createEvent('TouchEvent'); 

如果您使用的是实际的移动设备或移动仿真，则可以使用。