模拟触摸屏幕的touchstart和touchend事件？

Question

我正在开发一个主要针对iPad的jQuery组件。是否有一种方法可以在桌面上模拟“touchstart”和“touchend”事件，而无需设备本身进行检查。

我正在开发一个jQuery组件，主要用于iPad。是否有任何途径在桌面电脑上模拟“touchstart” 和 “touchend” 事件，而不需要设备本身来检测这些事件？请注意，保留文本中的HTML标签格式。

- user1184100

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已经在移动市场上占据了平板电脑，并使用了一个更抽象的事件模型，包括Pointers。

- Sampson

Answer 2

Chrome浏览器内的Chrome Dev-tools可以模拟触摸事件。请参见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. 重新加载您的页面。

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

- Thaddeus Albers

---

我早就想到了。然而，即使打开仿真并重新加载，ontouchstart 仍然不会触发。也许它只是不起作用，我必须模拟事件... - CunningFatalist

Answer 3

截至2018年，Chrome DevTools已经直接支持设备仿真，无需任何覆盖设置。只需切换设备工具栏（Ctrl + Shift + M）即可将浏览器切换到移动模式，然后鼠标可以触发触摸事件。

- prusswan