从单击链接/按钮到触发事件,我已经读到了 mobile Safari has a 300ms delay on click events.延迟的原因是等待看看用户是否打算双击,但从用户体验的Angular 来看,等待300ms通常是不可取的.

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.

像许多网站一样,我的网站有很多这样的点击事件:

$("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毫秒延迟,如下所示:

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

这是个坏主意/好主意吗?

推荐答案

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

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

This is currently supported Chrome for Android, Firefox for Android and Safari for iOS

However on iOS Safari,双击是不可zoom 页面上的滚动手势.出于这个原因,they can't remove the 300ms delay.如果他们不能消除不可zoom 页面上的延迟,他们就不太可能删除可zoom 页面上的延迟.

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

UPDATE 2015 December

到目前为止,iOS上的WebKit和Safari在单次点击激活链接或按钮之前有350毫秒的延迟,人们可以通过双击来放大页面.几个月前,Chrome已经改变了这一点,它使用了一种更智能的算法来检测这一点.这篇文章提供了一些关于浏览器如何使用touch 手势的深刻见解,以及浏览器如何仍能比现在更加智能.

UPDATE 2016 March

在Safari for iOS上,检测第二次点击的350毫秒等待时间已被删除,以创建"快速点击"响应.这一功能适用于声明具有宽度=设备宽度或用户可伸缩性=否的视口的页面.作者还可以使用CSS touch-action: manipulation(如文档here所述)和here, Select 在特定元素上快速点击行为.

Jquery相关问答推荐

在shiny 的datatable列中启用智能搜索

将日期时间从 javascript 传递给 c# (Controller)

Bootstrap 的工具提示在悬停时将表格单元格向右移动一点

Ajax 替换而不是追加

jQuery 的元素或类 LIKE Select 器?

使用 jQuery 和 HTML 导出为 CSV

在网络浏览器中,onblur 和 onfocusout 有什么区别?

不使用插件的 jQuery 缓动函数

动画元素变换旋转

如何使用 jQuery 进行带命名空间的 XML 解析

数字键盘的keyCode值?

如何清除/重置 jQuery UI Datepicker 日历上的选定日期?

如何使用 jQuery 隐藏 div?

如何从 jQuery UI datepicker 获取日期

如何使用 jQuery 在悬停时显示工具提示消息?

如何使用 javascript (jquery) 将整数值添加到返回字符串的值中?

在未实现接口 FormData 的对象上调用附加

检测页面是否已完成加载

带有 LIKE 的 Spring JPA @Query

自调用函数前的分号?