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

IT技术 javascript jquery jquery-mobile safari touch
2021-02-22 22:42:05

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

消除这种 300 毫秒延迟的一种解决方案是使用 jQuery Mobile“点击”处理。不幸的是，我不熟悉这个框架，如果我需要的只是以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 毫秒延迟：

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

这是一个坏/好主意吗？

6个回答

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

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

这是目前支持Android版Chrome，Android版Firefox和Safari浏览器适用于iOS

但是在 iOS Safari 上，双击是不可缩放页面上的滚动手势。出于这个原因，他们无法删除 300ms delay。如果他们不能在不可缩放的页面上消除延迟，他们就不太可能在可缩放的页面上消除它。

Windows Phone在不可缩放的页面上也保留了 300 毫秒的延迟，但它们没有像 iOS 那样的替代手势，因此它们可以像 Chrome 那样消除这种延迟。您可以使用以下方法消除 Windows Phone 上的延迟：

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 将采用类似的方法。这篇文章提供了一些很好的见解，浏览器如何处理触摸手势，以及浏览器如何仍然比现在更智能。

2016 年 3 月更新

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

从主页（独立）运行应用程序时，iOS 上仍然存在问题。如果有人找到了合适的解决方法，将非常受欢迎
2021-04-18 22:42:05
将触摸动作值设置为操作最接近所需的性能，但正如@MiguelGuardo 之前所述，一旦您将网页作为独立应用程序添加到 iOS 的主屏幕，效果就会丢失。
2021-04-28 22:42:05
是的，正如我在帖子中所写的那样，由 -ms-touch-action 控制。
2021-05-01 22:42:05
实际上，WP 有触摸事件：stackoverflow.com/questions/13396297/...
2021-05-03 22:42:05
可能有人可以破解 UIWebView - stackoverflow.com/questions/55155560/...
2021-05-07 22:42:05

这个由金融时报开发的插件-FastClick 非常适合您！

确保在点击功能之后添加event.stopPropagation();和/或event.preventDefault();直接添加，否则它可能会像我一样运行两次，即：

$("#buttonId").on('click',function(event){
    event.stopPropagation(); event.preventDefault();
   //do your magic

});
event.stopPropagation() 正是我首先来到这个页面的原因。完美运行，谢谢！
2021-04-16 22:42:05
如果您使用的是 jquery mobile（无论如何都是 1.3.2 版），这并不完美，它会破坏面板小部件github.com/jquery/jquery-mobile/issues/6440的关闭
2021-04-23 22:42:05
@Jonathanfastclick只在有延迟问题的触摸设备上发挥它的魔力（否则它会被自动绕过）。但是，在每个单击事件之后简单地添加stopPropagation&preventDefault可能会对所有浏览器中的所有事件处理程序产生不必要的副作用。
2021-04-24 22:42:05

我知道这是旧的，但你不能测试一下浏览器是否支持“触摸”？然后创建一个“touchend”或“click”变量并将该变量用作绑定到元素的事件？

var clickOrTouch = (('ontouchend' in window)) ? 'touchend' : 'click';
$('#element').on(clickOrTouch, function() {
    // do something
});

因此，该代码示例会检查浏览器是否支持“touchend”事件，如果不支持，则我们使用“click”事件。

（编辑：将“touchend”更改为“ontouchend”）

谢谢，我喜欢这个简单。我希望其他人能够指出它可能存在的陷阱。
2021-04-17 22:42:05
由于@Andreas Köberle 在回复中解释的内容，touchend 事件无法替换 click 事件。例如，如果您滚动并且手指停在按钮上，它将触发链接...
2021-04-17 22:42:05
某些设备同时支持触摸和点击事件，您希望它们在不同情况下都触发。我们遇到过这样的情况，一些带有鼠标的 Windows 或 android 平板电脑在您单击某物时显然会触发 click 事件，但在您点击时它也会触发触摸事件。这意味着您必须收听这两个事件。作为一个额外的复杂因素，一些设备会在您点击时合成一个点击事件，因此在这些设备上同时监听这两个事件可能会导致您的事件处理程序触发两次，除非您非常小心。
2021-04-21 22:42:05
这是一个很棒的轻量级解决方案，而不必为了摆脱延迟而包含一个庞大的附加库。希望我能在这个问题上投票 5 次！（只要你不担心滚动场景！）
2021-04-27 22:42:05
对于支持触摸和点击事件的计算机/浏览器，这是一个糟糕的解决方案。
2021-05-15 22:42:05

我遇到了一个非常受欢迎的替代方案，称为 Hammer.js （Github 页面），我认为这是最好的方法。

Hammer.js 是一个比 Fastclick.js（最受好评的答案）更全功能的触摸库（有很多滑动命令）。

但要注意：当您使用 Hammer.js 或 Fastclick.js 时，在移动设备上快速滚动往往会真正锁定 UI。如果您的网站有一个新闻源或一个用户会滚动很多的界面（看起来像大多数网络应用程序），这是一个主要问题。出于这个原因，我目前没有使用这些插件。

不要使用 Hammerjs。它有一些严重的问题，例如：github.com/EightMedia/hammer.js/issues/388 github.com/EightMedia/hammer.js/issues/366 至少在它们得到修复之前不要使用它
2021-04-28 22:42:05

不知何故，禁用缩放似乎禁用了这个小延迟。有道理，因为那时不再需要双击。

如何在移动网页上“禁用”缩放？

但请注意这将产生的可用性影响。它可能对设计为应用程序的网页有用，但不应用于更通用的“静态”页面恕我直言。我将它用于需要低延迟的宠物项目。

其它你可能感兴趣的问题
上一篇如何在 RequireJS 中模拟单元测试的依赖项？ 下一篇在 ES6 module中导出多个类