消除移动 Safari 中点击事件的 300 毫秒延迟

我读过移动版 Safari 在点击事件上有 300 毫秒的延迟从点击链接/按钮到事件触发。延迟的原因是等待用户是否打算双击，但从 UX 角度来看，等待 300 毫秒通常是不可取的。

一种解决方案要消除这 300 毫秒的延迟，可以使用 jQuery Mobile“tap”处理。不幸的是，我不熟悉这个框架，并且不想加载一些大框架，如果我只需要一两行代码应用touchend以正确的方式。

与许多网站一样，我的网站有许多这样的点击事件：

$("button.submitBtn").on('click', function (e) {   
  $.ajaxSubmit({... //ajax form submisssion
});

$("a.ajax").on('click', function (e) {   
  $.ajax({... //ajax page loading
});

$("button.modal").on('click', function (e) {   
      //show/hide modal dialog
});

我想做的是消除 300 毫秒的延迟ALL这些点击事件使用单个代码片段，如下所示：

$("a, button").on('tap', function (e) {
 $(this).trigger('click');
 e.preventDefault();
});

这是一个坏主意/好主意吗？

现在，如果您设置视口，某些移动浏览器会消除 300 毫秒的点击延迟。您不再需要使用解决方法。

<meta name="viewport" content="width=device-width, user-scalable=no">

这是目前支持 Android 版 Chrome, 安卓版火狐浏览器 and iOS 版 Safari

However on iOS Safari, double-tap is a scroll gesture on unzoomable pages. For that reason they can't remove the 300ms delay. If they can't remove the delay on unzoomable pages, they're unlikely to remove it on zoomable pages.

Windows Phones also retain the 300ms delay on unzoomable pages, but they don't have an alternative gesture like iOS so it's possible for them to remove this delay as Chrome has. You can remove the delay on Windows Phone using:

html {
-ms-touch-action: manipulation;
touch-action: manipulation;
}

Source: http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

2015 年 12 月更新

到目前为止，iOS 上的 WebKit 和 Safari 在单击激活链接或按钮之前有 350 毫秒的延迟，以允许人们通过双击放大页面。 Chrome 几个月前就已经通过使用更智能的算法来检测这一点并改变了这一点WebKit 将遵循类似的方法。这篇文章提供了一些关于浏览器如何使用触摸手势的深刻见解，以及浏览器如何仍然比现在更加智能。

2016 年 3 月更新

在 iOS 版 Safari 上，检测第二次点击的 350 毫秒等待时间已被删除，以创建“快速点击”响应。对于使用 width=device-width 或 user-scalable=no 声明视口的页面启用此功能。作者还可以使用 CSS 选择对特定元素进行快速点击行为touch-action: manipulation据记录here（向下滚动到“设置快速点击行为样式”标题）并here.