在第一次touchstart活动中禁用所有点击事件是个好主意吗？

Question

由于touchstart，tap和300ms延迟点击之间的冲突，制作一个快速响应的网站相对困难。

vclick应该解决这些问题，但他们似乎也有完全修复它的问题。 从文档：

警告：请谨慎使用vclick

在触摸设备上谨慎使用vclick。 基于Webkit的浏览器在调度touchend事件大约300ms后合成mousedown，mouseup和click事件。 合成鼠标事件的目标是在它们被分派时计算的，并且基于触摸事件的位置，并且在某些情况下，实现特定的启发式方法导致不同设备上的不同目标计算甚至不同的OS版本。相同的设备。 这意味着原始触摸事件中的目标元素可以与合成鼠标事件内的目标元素不同。

我们建议使用click而不是vclick，只要触发的动作有可能更改屏幕上触摸的点下方的内容。 这包括页面转换和其他行为，例如崩溃/展开，可能导致屏幕移位或内容被完全替换。

现在我正在考虑做一些更简单的事情。 每当触发touchstart事件时，我都知道这是一个触摸设备。 我只是禁用所有点击事件，并开始听touchstart（或点击） 只有事件。 忽略300ms延迟点击事件。

当然，有鼠标和触摸的设备，但同时使用这些设备的人对我来说似乎是少数。

这是个好主意，还是我在思考中遗漏了什么？

Answer 1

首先......是什么让你说同时使用触摸和鼠标输入的人是少数？

当使用<meta name="viewport" content="width=device-width">时，现在Android上的300ms点击延迟已经消失了一段时间。 不幸的是，它无法在iOS上删除，因为它是不可编辑页面上的滚动手势，几乎没有人知道。

尽管iOS设备有300毫秒的延迟，但我认为最好的方法仍然是支持鼠标和触摸输入。 假设用户在使用一次时将专门使用触摸输入是危险的。

想象一下用户愉快地使用鼠标进行导航。 他们看到一些有趣的东西，他们想要更近一点，所以他们使用触摸手势放大，所有突然的鼠标点击不再工作。 这对我来说听起来很糟糕。

我记得有关检测鼠标用户的有趣讨论 。 也许它会帮助你看到不同的东西。

Answer 2

是的，我认为这是明智的选择。 事实证明这是一个非常困难的问题，当你仍然将它与由一些真正糟糕的移动设备引起的兼容性问题结合起来时，这些移动设备甚至不遵循标准，它很快就会成为你无法赢得的战斗。 我们采用了接近此的解决方案，并意识到可能会出现设备不良的问题。 但毕竟，你无法满足每个人的需求，而且使用的分配倾向于支持那些遵循标准的设备（现在）。

另请注意，您无需等待第一个touchstart发生。 相反，您可以在DOM准备好之后执行此操作并相应地绑定事件。

var isTouchDevice = 'ontouchstart' in document.documentElement;

这是从KevBurnsJr的答案中复制而来的 。

另外您可能已经知道，您可以绑定到所有类型的事件，然后检查何时输入事件实际所在的回调类型

event.type

祝好运！

Answer 3

根据您的建议，根据单个touchstart开始禁用所有点击事件将是一个坏主意。 虽然同时使用指针或触摸不是常见的用例。 防止鼠标/笔和触摸的双重使用不是前向兼容的方法。

当你说：“忽略300ms延迟点击事件。”

我认为你对click做出了错误的假设。 你仍然需要以这种或那种方式综合点击。 单独的touchstart不是点击动作。 假设点击发生在touchend ，而不是touchstart 。 以下是在移动设备上尽早检测点击的原则： https ： //developers.google.com/mobile/articles/fast_buttons

如果您正在寻找快速点击，您可能需要在github上查看fastclick脚本或其他快速 点击脚本而不是vclicks 。

Answer 4

为了避免人们使用触摸屏和鼠标具有令人愉快的反应性的问题，我建议在JQuery中，它对我来说足够好：

$elem.on('click touchstart', function(e){
   var $self = $(this);
   if(e.type == 'touchstart'){ 
      $self.mouseenter(); //fire events you still need 
      e.preventDefault();
   }
   /* your code */
});

从我的经验来看，这比通过设备保持点击事件和一些危险品种的延迟更好，但也有不便之处。

在我测试的iPad上，它避免了在第一次点击时触发悬停事件然后在第二次点击时触发点击事件的情况，但是当您点击元素的边界而不是触摸开始时点击事件似乎也会触发，必须记在心上。

此外，它似乎不适用于'tap'事件，当然因为JQuery还没有很好地对待它。