防止触摸设备出现 300 毫秒延迟答案

【问题标题】：Prevent 300ms delay on Touch-Devices防止触摸设备出现 300 毫秒延迟
【发布时间】：2013-04-13 07:58:31
【问题描述】：

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

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

对我来说，这似乎很完美，但我确信有理由不应该这样做。感谢您为我指明正确的方向！

【问题讨论】：

我想向您指出正确处理此问题的ftlabs.github.io/fastclick
谢谢 - 但我读到：“在内部，FastClick 使用 document.createEvent 在浏览器触发 touchend 后立即触发合成点击事件。然后它会抑制浏览器创建的额外点击事件之后。” - 那么我的代码示例的实际好处或区别是什么？
您的解决方案是否适用于不同的平台/版本？
请记住，在 iOS 上（也可能在 Android 上），双击用于缩放页面。用户期望如此。此外，您应该确保您的代码不会在滚动/拖动事件或长按（通常会显示允许“在后台打开”等操作的上下文菜单）时产生意外行为。最后，在启用辅助功能的情况下测试您的网站。启用画外音时，单击选择并激活双击（页面上的任何位置），尽管在这种情况下您的页面可能永远不会看到原始点击。
@Dave 你有一些有效的观点，我同意。但是，缩放在该页面上完全禁用，它是一个响应式站点，并且在缩放 = 1 时完美显示。我将不得不考虑滚动/拖动，谢谢。可访问性是一个问题，这是真的，但是用于禁用延迟的（重型）框架都没有解决这个问题，他们怎么可能呢？如果你想在第一次点击时直接行动，那么双击是不可能的，对吧？

标签： javascript ios web-applications touch

【解决方案1】：

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

消除延迟的标准方法是使用 CSS touch-action 属性。在我写这篇文章时，Firefox 仍然默认不支持它（about:config 有标志layout.css.touch_action.enabled which is false by default），Safari 仍然根本不支持它。 MSIE、Chrome 和 Android 浏览器都已在所有平台上支持此功能。

简而言之：

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

【讨论】：

【解决方案2】：

简答：click（在移动设备中）希望您在结束时在同一个地方开始。 touchend 让您可以从任何地方开始。

现在fastclick 和其他库似乎处理的不仅仅是链接，例如按钮单击、表单交互等。因此，您可能还会遗漏一些边缘情况。

但至于“物有所值”你的东西很好用 ;-)

【讨论】：