300ms延迟删除：使用fastclick.js vs使用ontouchstart

我正在使用常规jQuery，我有一个如下所示的事件处理程序：

$('#someID').on({ click: SomeFunction }, '.SomeClass'); 

这将在点击事件上产生300毫秒的延迟，我希望消除此延迟。 重写这段代码有什么区别：

 $('#someID').on({ 'touchstart': SomeFunction }, '.SomeClass'); 

并使用像Fastclick.js这样的外部库？

Answer 1

我为英国“金融时报”工作，领导创建Fastclick.js的团队。

原则上，所有Fastclick都会绑定到touchend事件并在同一元素上触发click事件。 然而，有许多边缘情况，陷阱和陷阱，我们已经发现了所有这些，并在fastclick中进行了解决。 例如：

• 如果你在触摸过程中移动手指，这是一种轻扫或其他类型的手势，所以我们不应该做出反应
• 如果你一次用多个手指触摸，我们不应该做出反应
• 如果您触摸文本字段，控件需要获得焦点并接收点击事件
• 有些控件需要本机点击才能运行（为了安全起见），所以我们应该允许选择性地选择Fastclick
• 当视口大小调整默认为device-width时，某些浏览器已支持快速单击。 我们不应该在这些用户代理中激活Fastclick行为。

由于Fastclick是1％的基本前提和99％的边缘情况，因此有许多较小的选择，包括你自己可以写的一个。 但是，许多人更喜欢使用经过良好测试的库所带来的保证。

请注意，我们使用touchend而不是touchstart因为A）直到您从鼠标按钮或触控板上抬起手指才触发点击，因此触摸应该反映该行为，B）直到您结束触摸我们还不知道是否你计划在手指与屏幕接触时移动手指，这可能是手势，滑动或滚动而不是点击。

希望有所帮助。

Answer 2

touchstart在您的手指触摸元素时发生，而单击不会触发，直到您在同一元素上释放手指（touchend）。 如果触摸，将手指移出元素，然后释放，不会发生任何点击事件。 但是，在这种情况下，确实会发生触摸开始。

因为你标记了Cordova ，我认为它是适用于移动设备的Cordova混合应用程序。
1.在2.3.x以上的Android上，如果禁用缩放，则会删除300毫秒：

2.在Android 4.4.3之后（其webview为Chrome 33），如果您指定该页面是针对移动设备优化的，则会删除300毫秒：

3. 在IE10 +上，使用CSS删除该延迟：

   -ms-touch-action：操纵; / * IE10 /
   触摸动作：操纵; / IE11 + * /

4. 在iOS上，您无法使用视口禁用300毫秒延迟

因此，为了确保删除300毫秒，我通常使用点按库进行点击。 例如： tappy （仅点按）， zepto touch （点按，滑动 – 如果您的网站已经使用zepto， 则很好）， hammer.js （各种手势），具体取决于您的需求。 那些点击事件不会受到300ms问题的影响。

FastClick.js应该没问题，虽然我还没有尝试过。

Answer 3

安德鲁给出了正确的答案。

一般来说，

当我们执行“点击”，“滑动”，“滚动”等时，将触发“touchstart” 。但是，如您所知，我们想要捕获的是“点击”。

FastClick.js的作用是定义“点击”规则 。 例如，我们可以将下面的条件设置为“单击”：

在“touchstart”和“touchend”之间的时间是200ms，在“touchmove”中，我们发现没有移动距离。

同样，我们可以将下面的条件设置为“滚动”：

在“touchstart”和“touchend”期间，在“touchmove”中，我们发现距离已在y轴上移动但没有x轴移动。

Answer 4

要摆脱300ms延迟，这里有两个选项：

选项1：

默认情况下， webview上的click事件会有大约300ms的延迟，这会导致单击按钮时响应/性能非常慢。 您可以尝试使用jQuery Mobile中的“tap”事件覆盖click事件以消除延迟:( 来源： IBM ）

 $('btnId').on('tap', function(e) { e.stopImmediatePropagation(); e.preventDefault(); ... }); 

选项2：有趣的

默认情况下，JQuery Mobile CSS 本身引入了很长的延迟 – 我的意思是一些地方300毫秒或350毫秒或225毫秒。 可以优化这些延迟。 我也修改了默认的CSS，并将页面转换的长延迟从350ms减少到100ms ，这真的很棒。

在Jquery Mobile CSS中搜索： animation-duration

JQuery Mobile 1.2.0

在某些地方，延迟设置为： -webkit-animation-duration:350ms;-moz-animation-duration:350ms而其他地方延迟为： -webkit-animation-duration:225ms;-moz-animation-duration:225ms

github上的最新版本：

 .in { -webkit-animation-timing-function: ease-out; -webkit-animation-duration: 350ms; -moz-animation-timing-function: ease-out; -moz-animation-duration: 350ms; animation-timing-function: ease-out; animation-duration: 350ms; } .out { -webkit-animation-timing-function: ease-in; -webkit-animation-duration: 225ms; -moz-animation-timing-function: ease-in; -moz-animation-duration: 225ms; animation-timing-function: ease-in; animation-duration: 225ms; } 

检查这个github代码 ：

现在由您来决定要优化的延迟，例如点击，页面转换，翻转，滑动等，因此只需使用您自己想要的延迟时间修改默认延迟时间。

这样就不需要额外的库了

Answer 5

如果您访问非移动优化的网站，它会开始缩小，以便您可以看到页面的整个宽度。 要阅读内容，您可以捏缩放，也可以双击某些内容以将其缩放为全角。 这种双击是性能杀手，因为每次敲击我们都要等待，看它是否会成为双击，等待是300ms。 以下是它的表现：

• touchstart
• touchend
• 如果再次点击，请等待300毫秒
• 点击

此暂停适用于JavaScript中的单击事件，但也适用于其他基于点击的交互，例如链接和表单控件。

http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

如果用户不想点击元素并且刚决定滚动，Fastclick.js解决相关问题。

Answer 6

你现在可能不会使用FastClick.js：

注意：截至2015年底，大多数移动浏览器（特别是Chrome和Safari）不再具有300毫秒的触摸延迟，因此fastclick对新浏览器没有任何好处，并且可能会在您的应用程序中引入错误。 仔细考虑您是否真的需要使用它。

（摘自： https ： //github.com/ftlabs/fastclick docs）