防止触摸设备延迟300ms

Question

Android和iOS设备上有300毫秒的内置延迟以捕获双击(无论如何,谁在网站上使用它,谈到用户体验？!)我想摆脱这种延迟并阅读很多关于主题,但仍然不明白为什么这个简单的代码不是"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为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;
}