模拟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。

来自文档...

  

模拟触摸事件

     

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

     

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

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

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

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

Answer 3

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