javascript - JavaScript touchend与点击困境

我正在使用一些javascript UI，并使用很多触摸事件(例如“touchend”)来改善触摸设备的响应。但是，有些逻辑问题困扰着我...

我已经看到许多开发人员在同一事件中混合了“touchend”和“click”。在许多情况下，它不会受到伤害，但是从根本上讲，该功能会在触摸设备上触发两次:

button.on('click touchend', function(event) {
  // this fires twice on touch devices
});

有人建议可以检测触摸能力，并适当地设置事件，例如:

var myEvent = ('ontouchstart' in document.documentElement) ? 'touchend' : 'click';
button.on(myEvent, function(event) {
  // this fires only once regardless of device
});

上面的问题是，它将在同时支持触摸和鼠标的设备上中断。如果用户当前在双输入设备上使用鼠标，则不会触发“单击”，因为仅将“触摸端”分配给了按钮。

另一种解决方案是检测设备(例如“iOS”)并根据该事件分配事件:
Click event called twice on touchend in iPad。
当然，上面链接中的解决方案仅适用于iOS(不适用于Android或其他设备)，似乎更像是一种“hack”，可以解决一些非常基础的问题。

另一个解决方案是检测鼠标的运动，并将其与触摸功能相结合，以确定用户是鼠标还是触摸。当然的问题是，当您要检测鼠标时，用户可能不会移动鼠标...

我能想到的最可靠的解决方案是使用一个简单的debounce函数来确保该函数仅在很短的间隔(例如100ms)内触发一次:

button.on('click touchend', $.debounce(100, function(event) {
  // this fires only once on all devices
}));

我是否缺少某些东西，或者有人有更好的建议吗？

编辑:我在发帖后找到了此链接，这建议了与上述类似的解决方案:
How to bind 'touchstart' and 'click' events but not respond to both?

最佳答案

经过一天的研究，我认为最好的解决方案是仅单击并使用https://github.com/ftlabs/fastclick消除触摸延迟。我不是100％地确定这样做是否像touchend一样有效，但至少并非没有任何距离。

我确实想出了一种方法，可以使用stopPropagation和preventDefault在触摸时禁用两次触发事件，但这很狡猾，因为它可能会干扰其他触摸手势，具体取决于所应用的元素:

button.on('touchend click', function(event) {
  event.stopPropagation();
  event.preventDefault();
  // this fires once on all devices
});

实际上，我在寻找一种在某些UI元素上结合touchstart的解决方案，但是除了上述解决方案之外，我看不到如何将其与单击结合起来。

关于javascript - JavaScript touchend与点击困境，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25572070/