Question

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

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

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

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

Answer 2

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

现在fastclick和其他库似乎只处理链接之外的其他内容，例如按钮点击，表单交互等等。所以可能会有一些边缘情况也会丢失。

但至于“砰的一声”你的东西很棒; - ）

防止触摸设备延迟300ms

2 个答案: