javascript touchend与点击困境 [英] javascript touchend versus click dilemma

问题描述

我正在开发一些javascript UI，并使用很多触摸事件，如touchend，以改善触摸设备的反应。但是，有一些逻辑问题，这些错误是我的错误...

I am working on some javascript UI, and using a lot of touch events like 'touchend' for improved response on touch devices. However, there are some logical issues which are bugging me ...

我看到许多开发人员在同一事件中混合touchend和click。在许多情况下，它不会伤害，但本质上功能将触发两次触摸设备：

I have seen that many developers mingle 'touchend' and 'click' in the same event. In many cases it will not hurt, but essentially the function would fire twice on touch devices:

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

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

It has been suggested that one could detect touch capability, and set the event appropriately for example:

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

上面的问题是它会在支持触摸和鼠标的设备上断开。如果用户当前在双输入设备上使用鼠标，则点击将不会触发，因为只有touchend被分配给该按钮。

The problem with the above, is that it will break on devices that support both touch and mouse. If the user is currently using mouse on a dual-input device, the 'click' will not fire because only 'touchend' is assigned to the button.

检测设备（如iOS）并基于设备分配基于事件：
[点击事件在iPad上的touchend上调用了两次]
当然，上面的链接的解决方案只适用于iOS（不是Android或其他设备），似乎更像一个黑客

Another solution is to detect device like "iOS" and assign based event based on device: [Click event called twice on touchend in iPad ] Of course, the solution in the link above is only for iOS (not Android or other devices), and seems more like a "hack" to solve something quite elementary.

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

Another solution would be to detect mouse-motion, and combine it with touch-capability to figure out if the user is on mouse or touch. Problem of course being that the user might not be moving the mouse from when you want to detect it ...

我可以想到的最可靠的解决方案是使用一个简单的去抖功能，只需确保该函数只在短时间内触发一次（例如100ms ）：

The most reliable solution I can think of, is to use a simple debounce function to simply make sure the function only triggers once within a short interval (for example 100ms):

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

我错过了什么，或有人有更好的建议吗？

Am I missing something, or does anyone have any better suggestions?

编辑：我在我的帖子后发现了此链接，这表明与上述类似的解决方案：
如何绑定touchstart和click事件，但不回复？

I found this link after my post, which suggests a similar solution as the above: How to bind 'touchstart' and 'click' events but not respond to both?

推荐答案

经过一天的研究后，我发现最好的解决方案是坚持点击<请使用 https://github.com/ftlabs/fastclick 删除触摸延迟。我不是100％肯定这是像 touchend 一样高效，但至少不是太远。

After a day of research, I figured the best solution is to just stick to click and use https://github.com/ftlabs/fastclick to remove the touch delay. I am not 100% sure this is as efficient as touchend, but not far from at least.

我没有想办法禁用触发通过使用stopPropagation和preventDefault触摸两次事件，但这是狡猾的，因为它可能会干扰其他触摸手势，取决于应用它的元素：

I did figure a way to disable triggering events twice on touch by using stopPropagation and preventDefault, but this is dodgy as it could interfere with other touch gestures depending on the element where it is applied:

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

我实际上在寻找一个解决方案来组合 touchstart 元素，但我看不到如何结合除了上述解决方案之外的 。

I was in fact looking for a solution to combine touchstart on some UI elements, but I can't see how that can be combined with click other than the solution above.

这篇关于javascript touchend与点击困境的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！