javascript - 模拟 touchstart 和 touchend 事件？

Question

我正在开发一个主要用于 ipad 的 jquery 组件。那么无论如何要在桌面上模拟“touchstart”和“touchend”事件，而不是让设备本身来检查事件。

Answer 1

您可以在 jQuery 中编写自己的自定义事件：

var event = $.Event( "touchstart", { pageX:200, pageY:200 } );

您可以针对 DOM 中的任何元素发出它们：

$("body").trigger( event );

演示： http: //jsbin.com/ezoxed/edit#javascript,html
进一步阅读：http ://api.jquery.com/category/events/event-object/

请记住，现在市场上有各种其他类型的接口不支持touchstart和touchend事件。例如，Windows 8 已经在移动市场上占领了平板电脑，它使用了由指针组成的更抽象的事件模型。

Answer 2

Chrome 浏览器中的 Chrome 开发工具允许您模拟触摸事件。请参阅https://developers.google.com/chrome-developer-tools/docs/mobile-emulation。

从文档...

模拟触摸事件

触摸是一种很难在桌面上测试的输入法，因为大多数桌面没有触摸输入。必须在移动设备上进行测试会延长您的开发周期，因为您所做的每一项更改都需要推送到服务器然后加载到设备上。

解决此问题的方法是在您的开发机器上模拟触摸事件。对于单点触控，Chrome DevTools 支持单点触控事件模拟，以便更轻松地在桌面上调试移动应用程序。

要从 Chrome 浏览器（从版本 29.0.1547.65 开始）使用：

1. 选择浏览器窗口右上角的 Chrome 菜单（三行堆叠）。
2. 选择工具 > 开发人员工具。（快捷键 Shift+Control+I）
   底部会出现一个工具窗口，其中选择了控制台选项卡。
3. 在右下角单击设置齿轮（看起来像一个齿轮）。
   将出现一个设置面板，顶部显示“常规”。
4. 单击左侧的“覆盖”以选择覆盖面板。
5. 向下滚动并选中“启用触摸事件”
6. 重新加载您的页面

您的鼠标现在将显示为一个模糊的圆圈。点击“触摸”。

Answer 3

截至 2018 年，Chrome DevTools 完全支持设备模拟，无需任何覆盖设置。只需切换设备工具栏 (Ctrl + Shift + M) 使浏览器进入移动模式，然后鼠标即可触发触摸事件。