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

Question

我已经读过,从点击链接/按钮到事件触发的时间,移动Safari的点击事件有300毫秒的延迟.延迟的原因是等待用户是否打算双击,但从UX角度来看,等待300毫秒通常是不合需要的.

消除这300ms延迟的一个解决方案是使用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毫秒延迟:

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

这是一个坏/好主意吗？

Answer 1

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

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

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

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

Windows手机在不可编辑的页面上也保留了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毫秒等待时间,以创建"快速点击"响应.对于声明视口宽度= device-width或user-scalable = no的页面启用此选项.作者还可以通过使用此处touch-action: manipulation记录的CSS (向下滚动到'Styling Fast-Tap Behavior'标题)和此处选择快速挖掘特定元素的行为.

Answer 2

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

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

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

});

Answer 3

我知道这已经过时但你不能只测试一下浏览器是否支持"touch"？然后创建一个"touchend"或"click"变量,并将该变量用作绑定到元素的事件？

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

因此,代码示例检查浏览器是否支持"touchend"事件,如果不支持,则我们使用"click"事件.

(编辑:将"touchend"更改为"ontouchend")

Answer 4

我遇到了一个非常受欢迎的替代方案,名为Hammer.js (Github页面),我认为这是最好的方法.

Hammer.js是比Fastclick.js(最受欢迎的答案)更全功能的触摸库(有许多滑动命令).

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