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

Question

我正在使用常规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毫秒:

<meta name="viewport" content="width=device-width, user-scalable=no" />

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

<meta name="viewport" content="width=device-width" />

3. 在IE10 +上,使用CSS删除该延迟:

   -ms-touch-action:操纵;/*IE10 /
   touch-action:操纵; / IE11 +*/

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

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

FastClick.js应该没问题,虽然我还没试过.