在移动Safari中消除300ms的点击事件延迟
我读过移动版Safari浏览器从点击链接/button到事件触发时点击事件延迟300毫秒 。 延迟的原因是要等待用户是否打算双击，但是从用户体验的angular度来看，等待300ms往往是不可取的。
消除这种300毫秒延迟的一个解决scheme是使用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(); });
这是一个坏的/好主意吗？
现在，如果您设置了视口，一些移动浏览器可以消除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毫秒，之后单击会激活链接或button，以便人们可以通过双击来放大页面。 Chrome在几个月前改变了这一点，已经通过使用更智能的algorithm来检测，现在WebKit将采用类似的方法 。 本文提供了一些很好的见解，浏览器如何使用触摸手势以及浏览器如何能够比现在更加聪明。
更新2016年3月
在iOS版的Safari上，检测到第二个水龙头的350毫秒等待时间已被移除，以创build“快速水龙头”响应。 对于声明宽度=设备宽度或用户可扩展=否的视口的页面，这是启用的。 作者还可以使用操作值通过使用CSS触摸操作属性来select快速点击特定元素上的行为。 见http://www.w3.org/TR/pointerevents/#the-touch-action-css-property 。
这个由金融时报开发的插件-FastClick可以完美地为您服务！
确保尽pipe添加event.stopPropagation(); 和/或event.preventDefault(); 直接在点击function之后，否则它可能会运行两次，就像它对我来说，即：
$("#buttonId").on('click',function(event){ event.stopPropagation(); event.preventDefault(); //do your magic });
我知道这是旧的，但不能只是testing，看看是否支持“触摸”浏览器？ 然后创build一个“touchend”或“click”variables，并将该variables作为绑定到您的元素的事件？
var clickOrTouch = (('ontouchend' in window)) ? 'touchend' : 'click'; $('#element').on(clickOrTouch, function() { // do something });
因此，代码示例检查浏览器是否支持“touchend”事件，如果不支持，则使用“click”事件。
（编辑：将“touchend”改为“ontouchend”）
我遇到了一个非常受欢迎的替代方法，称为Hammer.js （Github页面） ，我认为这是最好的方法。
Hammer.js是一个function更全面的触摸库（有许多滑动命令）比Fastclick.js（最多upvoted的答案）。
但要小心：在使用Hammer.js或Fastclick.js时，在移动设备上快速滚动往往会locking用户界面。 这是一个主要的问题，如果您的网站有一个新闻或界面，用户将滚动很多（看起来像大多数networking应用程序）。 出于这个原因，我目前没有使用这些插件。
不知何故，禁用缩放似乎禁用这个小的延迟。 有意义，因为不再需要双击。
如何“禁用”移动网页上的缩放？
但是请注意这个可用性的影响。 它可能是有用的网页devise为应用程序，但不应该用于更通用的“静态”页恕我直言。 我用它来做一个需要低延迟的宠物项目。
不幸的是，没有简单的方法来做到这一点。 所以使用touchstart或touchend会给你带来其他问题，比如有人开始滚动，比如点击一个button。 我们使用zepto一段时间，即使有了这个非常好的框架，也存在一些问题。 他们中的很多人被closures ，但似乎不是一个简单的解决scheme领域。
我们有这个解决scheme来全球处理点击链接：
$(document.body). on('tap', 'a',function (e) { var href = this.getAttribute('href'); if (e.defaultPrevented || !href) { return; } e.preventDefault(); location.href= href; }). on('click', 'a', function (e) { e.preventDefault(); });
我search了一个简单的方法没有jQuery和没有fastclick库。 这适用于我：
var keyboard = document.getElementById("keyboard"); var buttons = keyboard.children; var isTouch = ("ontouchstart" in window); for (var i=0;i<buttons.length;i++) { if ( isTouch ) { buttons[i].addEventListener('touchstart', clickHandler, false); } else { buttons[i].addEventListener('click', clickHandler, false); } }
只是提供一些额外的信息。
在iOS 10上，我的页面上的<button>无法持续触发。 总是有一个滞后。
我试过fastclick / Hammer / tapjs /用touchstartreplaceclick，都失败了。
更新：原因似乎是button太靠近边缘！ 把它移到靠近中心的地方，然后就不要了！
你应该明确地声明被动模式 ：
window.addEventListener('touchstart', (e) => { alert('fast touch'); }, { passive : true});
