问题 模拟touchstart和touchend事件?


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


9194
2018-05-02 02:00


起源



答案:


您可以在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已经占据了移动市场中的平板电脑,它使用了由指针组成的更抽象的事件模型。


7
2018-05-02 02:23





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

来自文档......

模拟触摸事件

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

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

要在Chrome浏览器中使用(从版本29.0.1547.65开始):

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

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


6
2017-09-09 21:35





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


0
2018-05-22 09:36