手动触发触摸事件 [英] manually trigger touch event

问题描述

我搜索过去30分钟，但没有找到解决方案。

我想触发一个 touchstart event on a element。

这将触发 touchstart 事件：

  var e = document.createEvent（'MouseEvent'）; 
 
 e.initMouseEvent（touchstart，true，true，window，1，screenX，screenY，clientX，clientY，
 ctrlKey，altKey，shiftKey，metaKey，button，relatedTarget）; 
 
 target.dispatchEvent（e）; 
  

请注意，变量由我的函数

但是有一个问题。 事件对象没有触摸属性。所以这样的东西不行：

  var touch = e.touches [0]; 
  

有没有办法触发 touchstart 事件手动（它应该在Android> = 4.0和触摸启用Chrome [DevTools]）上工作？

请注意，我不想使用任何框架像jQuery。使用jQuery可以轻松地在元素上创建一个 touchevent ;

解决方案

根据 W3C

  var e = document.createEvent（'TouchEvent'）; 
  

然后，也更改

  e.initMouseEvent（）; 
  

至

  e.initTouchEvent（）; 
  

由于您创建了一个 touchstart 事件

W3C链接说：

某些用户代理实现了一个initTouchEvent方法作为TouchEvent界面的一部分。当该方法可用时，脚本可以使用它来初始化TouchEvent对象的属性，包括其TouchList属性（可以使用从createTouchList返回的值进行初始化）。 initTouchEvent方法尚未标准化，但在未来的规范中可能会出现某种形式。

所以你可能需要诉诸 e.initUIEvent（'touchstart'，true，true）;

此外，官方规范还指出， TouchList object is 可选，可以使用 createTouchList 方法手动创建。要将触摸添加到该列表中，您必须调用 createTouch 方法，您将在其中传递所有坐标等： p>

 
 6.1方法
 
 #createTouch 
创建具有指定属性的Touch对象。 
参数|类型| Nullable |可选|描述
视图| WindowProxy | ✘| ✘| 
 target | EventTarget | ✘| ✘| 
 identifier |长| ✘| ✘| 
 pageX |长| ✘| ✘| 
 pageY |长| ✘| ✘| 
 screenX |长| ✘| ✘| 
 screenY |长| ✘| ✘| 
返回类型：触摸
 
 #createTouchList 
创建一个由零个或多个触摸对象组成的TouchList对象。调用这个方法没有参数创建一个没有对象的TouchList，长度为0（零）。 
 
参数|类型| Nullable |可选|描述
 touches |触摸| ✘| ✔| 
返回类型：TouchList 
 
 

如果不行，可以试试这个：

  var e = document.createEvent（'UIEvent'）; 
 e.initUIEvent（）; 
  

应该工作，它比 createEvent（'MouseEvent'）无论如何... _
但为了测试目的，为什么不打开Chrome控制台并检查模拟触摸事件加上覆盖用户代理到Android 4.（Ctrl + Shift + j>单击齿轮右下角，然后选择覆盖，您将找到所需的所有设置）

<由于触摸事件还有很长的路要走，仍然在标准化方面，原来触及属性不 RO（还是？），所以你可以使用这个快速修复（OP找到并使用所需的结果）：

  var e = document.createEvent（'TouchEvent'）; 
 e.touches = [{pageX：pageX，pageY：pageY}]; 
  

我认为（如果不是这样，我不敢相信）更快比如：

  e.touches = e.createTouchList（
 e.createTouch（window，target，0，pageX， pageY，screenX，screenY）
）; 
  

I searched for the past 30 minutes, but didn't find a solution.

I want to trigger a touchstart event on an element.

This fires the touchstart event:

var e = document.createEvent('MouseEvent');

e.initMouseEvent("touchstart", true, true, window, 1, screenX, screenY, clientX, clientY,
    ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget);

target.dispatchEvent(e);

Note that the variables are defined by my function

But there's a problem with that. The event object doesn't have a touches property. So something like this won't work:

var touch = e.touches[0];

Is there a way to trigger a touchstart event manually (it should work on Android >= 4.0 and Chrome with touch enabled [DevTools]) ?

Please note, that I do NOT want to use any framework like jQuery. With jQuery it's easy to create a touchevent on an element ;)

解决方案

According to W3C

var e = document.createEvent('TouchEvent');

Then, also change

e.initMouseEvent();

to

e.initTouchEvent();

As you've created a touchstart event.

The W3C link says:

Some user agents implement an initTouchEvent method as part of the TouchEvent interface. When this method is available, scripts can use it to initialize the properties of a TouchEvent object, including its TouchList properties (which can be initialized with values returned from createTouchList). The initTouchEvent method is not yet standardized, but it may appear in some form in a future specification.

So you'll might have to resort to e.initUIEvent('touchstart', true, true);
In addition, the official spec also states that the TouchList object is optional, and can be created manually using the createTouchList method. To add a touch to that list, you'll have to call the createTouch method, where you'll pass all coordinates and such:

6.1 Methods

#createTouch
Creates a Touch object with the specified attributes.
Parameter | Type        | Nullable | Optional | Description
view      | WindowProxy |   ✘      |    ✘     |
target    | EventTarget |   ✘      |    ✘     |
identifier| long        |   ✘      |    ✘     |
pageX     | long        |   ✘      |    ✘     |
pageY     | long        |   ✘      |    ✘     |
screenX   | long        |   ✘      |    ✘     |
screenY   | long        |   ✘      |    ✘     |
Return type: Touch

#createTouchList
Creates a TouchList object consisting of zero or more Touch objects. Calling this method with no arguments creates a TouchList with no objects in it and length 0 (zero).

Parameter | Type  | Nullable | Optional | Description
touches   | Touch |     ✘    |    ✔     |
Return type: TouchList

If that doesn't work, you could try this:

var e = document.createEvent('UIEvent');
e.initUIEvent();

should work, it makes more sense than createEvent('MouseEvent') at any rate...
But for testing purposes, why not open your chrome console and check Emulate touch events, plus override user agent to Android 4. (Ctrl+Shift+j > click the gear bottom right corner, and select Overrides, there you'll find all the settings you need)

Since the touch-events have a long way to go, still in terms of their becoming standardized, it turns out the touches property is not RO (yet?), so you can use this quick-fix (which the OP found and used with the desired result):

var e = document.createEvent('TouchEvent');
e.touches = [{pageX: pageX, pageY: pageY}];

Which, I think (I can't believe it if it weren't the case) is faster than:

e.touches = e.createTouchList(
    e.createTouch(window, target, 0, pageX, pageY, screenX, screenY)
);

这篇关于手动触发触摸事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！