Javascript 300毫秒延迟删除：使用fastclick.js与使用ontouchstart

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

$('#someID').on({

   click: SomeFunction

}, '.SomeClass');

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

$('#someID').on({

   'touchstart': SomeFunction

}, '.SomeClass');

---

使用像？

这样的外部库，如果您访问的站点未进行移动优化，它将开始缩小，以便您可以看到页面的整个宽度。要阅读内容，您可以按住缩放键，或双击某些内容以将其缩放到全宽。这种双点击是性能杀手，因为每次点击我们都要等待，看它是否会变成双点击，等待时间是300毫秒。下面是它的结果：

• 触控启动
• 接触端
• 等待300毫秒，以防再次抽头
• 点击

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

Fastclick.js解决用户不想点击元素而决定滚动的相关问题。

触摸启动发生在手指接触元素的时候，而只有在同一元素上松开手指（touchend）后，点击才会触发。如果触摸，将手指移出图元，然后松开，则不会发生单击事件。但是，在这种情况下，确实会出现touchstart

因为您标记了Cordova，所以我假设它是一款用于移动的Cordova混合应用程序。
1.在Android 2.3.x版之后的版本中，如果禁用缩放，300毫秒将被删除：

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

二,。在Android 4.4.3（其网络视图为Chrome 33）之后的版本中，如果您指定页面经过移动优化，则300ms将被删除：

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

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

-ms触摸操作：操作；/*IE10/
触摸动作：操纵；/IE11+*/

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

因此，为了确保删除300ms，我通常使用tap库进行tap。例如：（只点击），（点击，滑动-如果你的站点已经使用zepto，那么很好），（各种手势），取决于你的需要。这些tap事件不会受到300ms问题的影响

---

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

我为英国《金融时报》工作，负责创建FastClick.js的团队

原则上，Fastclick所做的一切都是绑定到

touchend

事件，并在同一元素上触发

click

事件。然而，有许多边缘案例、陷阱和陷阱，所有这些都是我们发现的、经过处理并融入fastclick的。例如：

• 如果你在触摸过程中移动手指，这是一种滑动或其他手势，因此我们不应该做出反应
• 如果你一次用一个以上的手指触摸，我们不应该做出反应
• 如果触摸文本字段，控件需要获得焦点并接收单击事件
• 有些控件需要本地点击操作（为了安全），因此我们应该允许选择性地选择Fastclick
• 当视口大小默认为设备宽度时，某些浏览器已经支持快速单击。我们不应该在这些用户代理中激活Fastclick行为

因为Fastclick是1%的基本前提和99%的边缘情况，所以有很多更小的替代方案，可能包括一个您可以自己编写的方案。但许多人更喜欢使用经过良好测试的库带来的安心

请注意，我们使用的是

touchend

而不是

touchstart

，因为A）在您将手指从鼠标按钮或触摸板上抬起之前，不会触发单击，因此触摸应该反映该行为；B）在您结束触摸之前，我们还不知道您是否打算在手指与屏幕接触时移动手指，这将是一个手势，滑动或滚动，而不是点击

---

希望这有帮助。

安德鲁给出了正确的答案

总的来说

“touchstart”将在执行“单击”、“滑动”、“滚动”等操作时触发。 然而，正如你所知，我们想要捕捉的是“点击”

FastClick.js所做的是为“单击”定义一个规则。。例如，我们可以将以下条件设置为“单击”：

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

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

---

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

要消除300ms延迟，有两个选项：

选项1:

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

默认情况下，webview上的单击事件将延迟约300ms，这将导致 单击按钮时，响应/性能非常慢。您可以尝试覆盖 在jQuery Mobile中单击带有'tap'事件的事件以删除延迟：（来源：）

选项2:有趣的一个

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

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

JQuery Mobile 1.2.0

在某些地方，延迟设置为：

-webkit动画持续时间：350ms-moz动画持续时间：350ms

而其他地方的延时为：

-webkit动画持续时间：225ms-moz动画持续时间：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;
}

检查：

现在由您决定要优化哪些延迟，如单击、页面转换、翻转、幻灯片等，并相应地修改默认设置