Question

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

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

警告：谨慎使用vclick

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

我们建议您在任何时候使用click而不是vclick   触发有可能改变下面的内容   在屏幕上触摸的一点。这包括页面转换和   其他行为，如崩溃/扩展，可能导致   屏幕移位或内容被完全替换。

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

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

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

Answer 1

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

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

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

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

我刚刚记得有关检测鼠标用户的interesting discussion。也许它可以帮助你看到不同的东西。

Answer 2

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

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

var isTouchDevice = 'ontouchstart' in document.documentElement;

从KevBurnsJr's answer复制。

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

event.type

祝你好运！

Answer 3

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

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

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

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

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上，它避免了在第一次点击时触发悬停事件然后在第二次点击时触发点击事件的情况，但是当您点击元素边界附近而不是触摸开始时点击事件似乎也会触发，必须记住它。

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

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

4 个答案: