防止触摸设备上的300毫秒延迟

Question

在Android和iOS设备上，存在一个内置的300毫秒延迟来捕获双击（谁在网站上使用它？说到用户体验呢？！） 我想摆脱这种延迟，阅读了很多关于这个主题的文章，但仍然不明白为什么这个简单的代码不是“OK”，或者会破坏用户体验：

$('a').bind('touchend', function (e) {
    e.preventDefault();
    this.click();
});

对我来说，它似乎运行得很完美，但我确信有理由不应该这样做。谢谢您指导我正确的方向！

- Raphael Jeger

---

我想指向http://ftlabs.github.io/fastclick/，它可以正确地处理这个问题。 - oiledCode

谢谢 - 但我在那里读到：“内部，FastClick使用document.createEvent在浏览器触发touchend时立即触发合成点击事件。然后，它抑制浏览器在此之后创建的其他点击事件。”- 那么与我的代码示例相比，实际的好处或区别是什么？ - Raphael Jeger

你的解决方案在不同的平台/版本上是否可用？ - oiledCode

请记住，在iOS（也许在Android上也是如此），双击用于缩放页面。用户期望如此。此外，您应确保您的代码在滚动/拖动事件或长按（通常显示上下文菜单，允许操作，如“在后台中打开”）时不会产生意外行为。最后，请启用辅助功能功能测试您的网站。当启用语音提示时，单击选择，双击（页面上的任何位置）激活，尽管在这种情况下，您的页面可能永远不会看到原始的轻敲。 - Dave

@Dave，你说的有些观点是正确的，我同意。然而，在那个页面上完全禁用了缩放，它是一个响应式网站，并且在缩放=1的情况下显示得非常完美。我将不得不研究滚动/拖动，谢谢。无障碍性是一个问题，这是真的，但是没有一个（沉重的）框架可以解决延迟的禁用，他们怎么能做到呢？如果您想直接在第一次单击时进行操作，就没有双击的可能性，对吧？ - Raphael Jeger

Answer 1

这段简单的代码表示，当触摸（拖动）事件结束在一个链接上时，触发“click”事件。如果用户在屏幕上滑动手指以滚动页面，并且这样的拖动结束在链接上，则链接将被意外触发。这会破坏用户体验（UX）。

消除延迟的标准方法是使用CSS touch-action属性。就我所知，目前Firefox默认情况下还不支持该属性（about:config具有标志layout.css.touch_action.enabled，默认为false），而Safari根本不支持此属性。MSIE、Chrome和Android浏览器已经在所有平台上都支持此属性。

简而言之：

/* Disable double-click to zoom on links, input fields
   and buttons to improve responsiveness */
a, input, button
{
    touch-action: manipulation;
}

- Mikko Rantalainen

Answer 2

简短回答：在移动设备中，点击（click）需要你在同一位置开始和结束。而触摸结束（touchend）则允许你从任何位置开始。

现在，fastclick 和其他库似乎处理的不仅仅是链接，还包括按钮点击、表单交互等等。因此，可能会有一些边缘情况被忽略。

但就“性价比”而言，你的方法非常好用；-)

- Jamund Ferguson