消除移动Safari中点击事件的300毫秒延迟 [英] Eliminate 300ms delay on click events in mobile Safari

问题描述

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

I've read that mobile Safari has a 300ms delay on click events from the time the link/button is clicked to the time the event fires. The reason for the delay is to wait to see if the user intends to double-click, but from a UX perspective waiting 300ms is often undesirable.

一个解决方案消除这300ms延迟是使用jQuery Mobile点击处理。不幸的是，我不熟悉这个框架，如果我需要的是一行或两行代码以正确的方式应用 touchend ，我不想加载一些大框架。

One solution to eliminate this 300ms delay is to use jQuery Mobile "tap" handling. Unfortunately I'm not familiar with this framework and don't want to load some big framework if all I need is a line or two of code applying touchend in the right way.

与许多网站一样，我的网站有很多点击事件，如下所示：

Like many sites, my site has many click events like this:

$("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毫秒延迟使用单个代码段的事件如下：

and what I'd like to do is to get rid of the 300ms delay on ALL those click events using a single code snippet like this:

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

这是一个坏主意吗？

推荐答案

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

Now some mobile browsers eliminate 300 ms click delay if you set the viewport. You don't need to use workarounds anymore.

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

目前支持Chrome for Android ， Firefox for Android 和适用于iOS的Safari

但是在iOS Safari 上，双击即可在不可编辑的页面上滚动手势。因此他们无法消除300毫秒的延迟。如果他们无法消除不可编辑页面上的延迟，则他们不太可能在可缩放页面上删除它。

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手机在不可编辑的网页上也会保留300毫秒的延迟，但他们没有像iOS所以他们可以像Chrome一样消除这种延迟。 您可以使用以下方法删除Windows Phone上的延迟：

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

资料来源： http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away

2015年12月更新

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

Until now, WebKit and Safari on iOS had a 350ms delay before single taps activate links or buttons to allow people to zoom into pages with a double tap. Chrome changed this a couple of months ago already by using a smarter algorithm to detect that and WebKit will follow with a similar approach. The article gives some great insights how browsers work with touch gestures and how browsers can still get so much smarter than they are today.

2016年3月更新

在Safari for iOS上，检测到第二次点击的350毫秒等待时间已被删除，以创建快速点击响应。对于声明视口宽度= device-width或user-scalable = no的页面启用此选项。作者还可以通过使用CSS touch-action：manipulation 来选择快速挖掘特定元素的行为这里（向下滚动到'Styling Fast-Tap Behavior'标题）和这里。

On Safari for iOS, the 350 ms wait time to detect a second tap has been removed to create a "fast-tap" response. This is enabled for pages that declare a viewport with either width=device-width or user-scalable=no. Authors can also opt in to fast-tap behavior on specific elements by using the CSS touch-action: manipulation as documented here (scroll down to the 'Styling Fast-Tap Behavior' heading) and here.

这篇关于消除移动Safari中点击事件的300毫秒延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！