300 vs延迟去除:使用fastclick.js与使用ontouchstart

Question

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

$('#someID').on({

   click: SomeFunction

}, '.SomeClass');

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

$('#someID').on({

   'touchstart': SomeFunction

}, '.SomeClass');

以及使用像Fastclick.js这样的外部库

Answer 1

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

原则上，Fastclick所做的一切就是绑定到touchend事件，并在同一个元素上触发一个click事件。然而，有许多边缘情况，陷阱和陷阱，所有这些我们已经发现，工作和烘焙成快速点击。例如：

• 如果你的手指在触摸时移动，这是一种滑动或其他姿势，所以我们不应该做出反应
• 如果你一次触摸不止一个手指，我们就不应该做出反应。
• 如果您触摸文本字段，则控件需要获得焦点以及接收单击事件。
• 有些控件需要本机单击才能操作(为了安全起见)，因此我们应该允许有选择地选择退出快速单击。
• 当视图大小默认为device-width时，一些浏览器已经支持快速单击。在这些用户代理中，我们根本不应该激活快速单击行为。

由于Fastclick是1%的基本前提和99%的边缘情况，所以有许多更小的选择，包括您可以自己编写的选项。但是许多人更喜欢使用经过良好测试的库所带来的安心。

请注意，我们使用的是touchend，而不是touchstart，因为只有从鼠标按钮或触控板上抬起手指，才会触发单击，所以触摸应该反映这种行为，而在触摸结束之前，我们还不知道您是否计划在手指与屏幕接触时移动手指，这将是一种手势、滑动或滚动，而不是单击。

希望这能有所帮助。

Answer 2

接触式启动发生在手指触摸元素时，而单击不会触发，直到您在同一元素上释放手指(touchend) 。如果触摸，将手指移出元素，然后释放，不会发生单击事件。但是，在这种情况下，就会发生触屏启动。

因为你给Cordova贴上标签，我想它是一个用于移动的Cordova混合应用程序。

1. 在自2.3.x以来的Android上，如果禁用缩放，将删除300 is：

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

1. 在自4.4.3 (其webview为Chrome 33)的Android上，如果您指定页面是移动优化的，则删除300 is：

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

1. 在IE10+上，使用CSS消除延迟：-ms-触摸-action:操纵；/* IE10 / 触摸-动作:操纵；/ IE11+ */
2. 在iOS上，您不能使用viewport来禁用300 to的延迟

因此，为了确保删除300 is，我通常使用tap库。例如：塔皮 (只点击)，zepto触摸 (点击，滑动-如果您的网站已经使用zepto)，hammer.js (各种手势)，视您的需要而定。这些水龙头事件不受300毫秒问题的影响。

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

Answer 3

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

总体而言,

当我们执行“点击”、“滑动”、“滚动”等操作时，“触控启动”将被触发。然而，正如您所知道的，我们想要捕获的是“单击”。

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

在“触地”和“触地”之间的时间是200毫秒，在“触地移动”中，我们发现没有移动的距离。

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

在“触地开始”和“触地移动”中，我们发现y轴上移动了距离，但x轴没有移动。