Question

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

我想在元素上触发touchstart事件。

这会触发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);

请注意，变量由我的函数

定义

但是有一个问题。 event对象没有touches属性。所以这样的事情不会起作用：

var touch = e.touches[0];

有没有办法手动触发touchstart事件（它应该适用于Android＆gt; = 4.0和启用了触控功能的Chrome [DevTools]）？

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

Answer 1

根据W3C

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

然后，也改变

e.initMouseEvent();

到

e.initTouchEvent();

正如您创建了touchstart事件。

W3C链接说：

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

所以你可能不得不诉诸e.initUIEvent('touchstart', true, true); 此外，官方规范还声明TouchList对象是可选，可以使用createTouchList方法手动创建。要将触摸添加到该列表，您必须调用createTouch方法，在该方法中您将传递所有坐标，例如：

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

如果这不起作用，你可以试试这个：

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

应该有用，无论如何都比createEvent('MouseEvent')更有意义......
但出于测试目的，为什么不打开Chrome控制台并检查Emulate touch events，并覆盖Android 4的用户代理。（Ctrl + Shift + j＆gt;点击右下角的齿轮，然后选择Overrides，那里你会找到你需要的所有设置）

由于触摸事件还有很长的路要走，仍然就其标准化而言，touches属性是而不是 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)
);

Answer 2

我知道这已经得到了解答，但我也很难找到这个问题的答案，而且接受的答案对我来说并不适用。最后，我发现的解决方案非常简单，并且支持跨浏览器：

var e = new Event('touchstart');
target.dispatchEvent(e);

那就是它。不可能更容易。

Answer 3

我想出了这个解决方案（javascript本机），对我有用

var el = document.getElementById('myDivId');
// desktop
el.click();

// mobile
if (window.matchMedia("(max-width: 768px)").matches) {
        // createEvent(), event.initEvent() are Depricated see Ref: [enter link description here][1]
        // var event = document.createEvent("Event"); 
        // event.initEvent("touchstart", false, true);
        // event.initEvent("touchend", false, true);
        // So the solution is:
        var event1 = new Event('touchstart');
        var event2 = new Event('touchend'); 
        el.dispatchEvent(event1); 
        el.dispatchEvent(event2);
  }

Answer 4

在2019年，我们可以使用TouchEvent和Touch。

Touch是一项实验技术

例如，

const touch = new Touch({
  identifier: "123",
  target: target,
});

const touchEvent = new TouchEvent("touchstart", {
  touches: [touch],
  view: window,
  cancelable: true,
  bubbles: true,
});

target.dispatchEvent(touchEvent);

我创建了gist。简单尝试。

Answer 5

我们可以这样触发：

$playBtn.bind((is_touch_device) ? 'touchstart' : 'click', playfunction);

手动触发触摸事件

5 个答案: