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" />

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

-ms-touch-action：操纵; / * IE10 /
触摸动作：操纵; / IE11 + * /
在iOS上，您无法使用 viewport 禁用300毫秒延迟

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

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

Answer 3

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

一般来说，

＆＃34; touchstart＆＃34; 将在我们执行＆＃34;点击＆＃34;，＆＃34;滑动＆＃34;，＆＃34;滚动＆＃34;等等但是，如您所知，我们想要捕获的是＆＃34;点击＆＃34;。

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

在＆＃34; touchstart＆＃34;之间的时间间隔和＆＃34; touchend＆＃34;是200毫秒，在＆＃34; touchmove＆＃34;，我们发现没有移动距离。

同样，我们可以将下面的条件设置为＆＃34;滚动＆＃34;：

在＆＃34; touchstart＆＃34;和＆＃34; touchend＆＃34;，在＆＃34; touchmove＆＃34;，我们发现距离已在y轴上移动但没有x轴移动。

Answer 4

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

选项1：

默认情况下， webview 上的点击事件会有 300ms 延迟，结果如下单击按钮时响应/性能非常慢。你可以尝试覆盖使用jQuery Mobile中的'点击'事件点击事件以消除延迟：（来源：IBM ）

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

选项2：有趣的

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

在Jquery Mobile CSS中搜索：动画持续时间

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;
}

检查this github code：

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

通过这种方式， NO 需要额外的库

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）

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

6 个答案: