Question

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

document.createEvent('TouchEvent');

但是我收到了这个错误：

未捕获DOMException：无法在“Document”上执行“createEvent”：提供的事件类型（“TouchEvent”）无效。

我看到Creating and firing touch events on a touch enabled browser?，这也似乎表明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 and TouchEvent constructors

Answer 2

看起来像是

document.createEvent('TouchEvent');

如果您使用的是实际的移动设备或移动模拟，则

有效。

Answer 3

我猜测在不抛出异常的情况下执行此操作的唯一方法是在您希望创建的事件类型中更明确：

var evt = document.createEvent('UIEvent');

evt.initUIEvent('touchstart', true, true);

TouchEvent是UIEvent的子类。

<强>更新

如上所述，在实际设备上（或模拟设备），可以使用标准document.createEvent方法轻松创建TouchEvent。

所以也许try / catch会按顺序排列：

try {

  document.createEvent('TouchEvent');

} catch (e) {

  console.log('No touching!');

}

Answer 4

更新：这实际上不会产生TouchEvent的实例。跛。

我是这样做的：

var type = 'start'; // or move, end
var event = document.createEvent('Event');
event.initEvent('touch' + type, true, true);     
event.constructor.name; // Event (not TouchEvent)

您还需要设置事件的触摸。这是另一种蠕虫，因为有些浏览器支持document.createTouch和document.createTouchList方法，有些浏览器不支持。在浏览器中，您只需创建和＃34; TouchEvent类似的JS对象和＃34;。这看起来像：

var point = {x: 10, y: 10 };
event.touches = [{
    target: someElement,
    identifier: Date.now() + i,
    pageX: point.x,
    pageY: point.y,
    screenX: point.x,
    screenY: point.y,
    clientX: point.x,
    clientY: point.y
}]

如何在Chrome 41中以编程方式创建触摸事件？

4 个答案: