3

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

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

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

4

2 回答 2

6

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

消除延迟的标准方法是使用 CSStouch-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;
}
于 2013-11-18T11:20:40.947 回答
2

简短回答： A click（在移动设备中）希望您从结束的地方开始。Atouchend让您从任何地方开始。

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

但是至于“物有所值”，您的东西效果很好；-)

于 2013-11-01T22:55:31.907 回答