模拟 touchstart 和 touchend 事件？答案

【问题标题】：Simulating touchstart and touchend events?模拟 touchstart 和 touchend 事件？
【发布时间】：2012-05-11 12:23:21
【问题描述】：

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

【问题讨论】：

标签： javascript jquery touch touch-event

【解决方案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 已经在移动市场上占领了平板电脑，它使用了由指针组成的更抽象的事件模型。

【讨论】：

【解决方案2】：

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

来自文档...

模拟触摸事件

触控是一种很难在桌面上测试的输入法，因为大多数台式机没有触摸输入。必须在手机上测试可以延长您的开发周期，因为您所做的每一次更改都需要推送到服务器，然后加载到设备上。

解决此问题的方法是在您的设备上模拟触摸事件开发机器。对于单点触控，Chrome DevTools 支持单点触摸事件仿真，使调试移动设备更容易桌面上的应用程序。

通过 Chrome 浏览器使用（自版本 29.0.1547.65 起）：

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

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

【讨论】：

我想的也差不多。但是，ontouchstart 仍然不会触发，即使在打开仿真并重新加载之后也是如此。也许它只是不起作用，我不得不模拟这个事件......

【解决方案3】：

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

【讨论】：