如何在没有大型图书馆的情况下获得触摸事件

Question

我正在使用jquery，但是我不想使用jquery mobile，因为它很大，而且我认为我不需要它。 我要做的就是获得触摸事件。 这就是我所拥有的。

 $('#menuButton').on('click touchstart', function(){
  $('#menu').toggleClass('block')
 });

它仅能正常工作，但似乎在我的手机上多次触发两次。 我认为我应该以某种方式同时检查touchstart和touchend。 希望这可以在所有类型的设备上运行。 谢谢！

Answer 1

看哪！ 触摸的生命周期：

1. 您的手指碰到了玻璃-> touchstart！
2. 你的手指离开玻璃杯->触摸！
3. 手指不停->单击！

现在单击鼠标的生命周期：

1. 您的手指按下按钮->按下鼠标！
2. 手指可以消除按钮上的压力-> mouseup！
3. 手指不停->单击！

如果您同时监听触摸启动和单击，则在生命周期中监听2个事件时，该事件将在鼠标或触控板计算机上触发一次，在触摸设备上触发两次。

如果您确实要在桌面和触摸设备的touchstart上使用click（在许多情况下是个好主意），则可以执行以下操作：

 var clickEvent = (isMobile)?'touchstart':'click';
 $('#menuButton').on(clickEvent, function(){
   $('#menu').toggleClass('block')
 });

寻找isMobile是另一回事。

---

更新：如果您感兴趣的npm isMobile ，我已经写了一个方便的脚本来检测移动设备