300ms延迟删除:使用fastclick.js vs使用ontouchstart [英] 300ms delay removal: using fastclick.js vs using ontouchstart

查看:441
本文介绍了300ms延迟删除:使用fastclick.js vs使用ontouchstart的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用正规的jQuery,我有一个事件处理程序,如下所示:

I'm using regular jQuery and I have an event handler that looks like this:

$('#someID').on({

   click: SomeFunction

}, '.SomeClass');

这将在点击事件上产生300ms的延迟,我正在寻找删除此延迟。重写这样的代码有什么区别:

This will produce a 300ms delay on the click event and I'm looking to remove this delay. What's the difference between rewriting this code like that:

$('#someID').on({

   'touchstart': SomeFunction

}, '.SomeClass');

并使用 Fastclick.js

推荐答案

我为金融时报工作, .js。

I work for the Financial Times and head up the team that created Fastclick.js.

原则上,所有Fastclick都绑定到 touchend 事件并触发单击同一元素上的事件。然而,有许多边缘情况,陷阱和陷阱,我们发现,所有的工作和烘焙成快速点击。例如:

In principle, all Fastclick does is bind to the touchend event and fire a click event on the same element. However, there are many edge cases, traps and pitfalls, all of which we have discovered, worked around and baked into fastclick. For example:


  • 如果在触摸过程中移动手指,则是滑动或其他类型的手势,因此我们不应该反应

  • 如果一次触摸多个手指,我们不应该反应

  • 如果触摸文本字段,控件需要获得焦点

  • 某些控件需要原生点击才能操作(为了安全起见),因此我们应允许选择退出Fastclick。

  • 某些浏览器已支持快速点击,当视口大小默认为 device-width 。我们不应在这些用户代理中激活Fastclick行为。

  • If you move your finger during the touch, it's a swipe or other kind of gesture, so we should not react
  • If you touch with more than one finger at a time, we should not react
  • If you touch a text field, the control needs to gain focus as well as receive a click event
  • Some controls require a native click to operate (for security), so we should allow selective opting-out of Fastclick
  • Some browsers already support fast clicking when viewport sizing defaults to device-width. We should not activate Fastclick behaviour at all in these user agents.

由于Fastclick是1%的基本前提和99%是很多的选择较小,包括可能一个,你可以写自己。但是很多人喜欢使用经过良好测试的库来确保安全。

Since Fastclick is 1% basic premise and 99% edge cases, there are lots of alternatives that are smaller, including probably one that you could write yourself. But many people prefer the reassurance that comes with using a well tested library.

请注意,我们使用 touchend touchstart 是因为A)只有在您将手指从鼠标按钮或触控板上抬起后,才会触发点击,因此触摸应反映该行为,B)直到结束触摸尚未知道您是否计划在触摸屏幕时移动手指,这将是手势,滑动或滚动而不是点击。

Note that we use touchend and not touchstart because A) a click is not triggered until you lift your finger from the mouse button or trackpad, so touch should mirror that behaviour, and B) until you end the touch we don't yet know if you plan on moving your finger while it's in contact with the screen, which would be a gesture, swipe or scroll rather than a click.

Hope这有助于。

这篇关于300ms延迟删除:使用fastclick.js vs使用ontouchstart的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆