消除移动 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.

一种解决方案来消除这个 300 毫秒的延迟是使用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
});

而我想要做的是使用如下所示的单个代码片段消除 ALL 那些点击事件上的 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();
});

这是一个坏/好主意吗?

Is that a bad/good idea?

推荐答案

现在，如果您设置视口，一些移动浏览器会消除 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">

目前支持 Android 版 Chrome、Android 版 Firefox 和 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 Phones 在不可缩放的页面上也保留了 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 月更新

在 iOS 版 Safari 上，检测第二次点击的 350 毫秒等待时间已被删除，以创建快速点击"响应.这适用于声明视口为 width=device-width 或 user-scalable=no 的页面.作者还可以通过使用 CSS touch-action: 操作 来选择特定元素的快速点击行为，如此处(向下滚动到样式化快速点击行为"标题)和 这里.

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屋！