移动端点击事件延迟的诞生消亡史 快速反馈对于任何UI的实现都是至关重要的。研究表明，100ms是界面让用户感到即时的最大延迟。尽管如此，移动网络仍然受到一个巨大的反馈问题的困扰：触摸任何元素后，延迟300毫秒。这种延迟是许多用户认为基于HTML的Web应用程序“卡顿”的最重要原因之一。在本文中，本文将带你了解移动端点击事件延迟的从诞生到消亡的过程。
诞生史
在2007年，苹果公司发布首款iPhone之前，由于当时的网站普遍为大屏幕设备所设计，为了应对iPhone这种小屏幕设备浏览桌面网站的问题，由此，苹果引入了多项变革，其中就包含了“双击缩放准确定位正文主体，并将其缩放至适合的比例展现”的功能，即双击缩放功能。然而，由于这种双击缩放的操作，在用户第一次单击页面元素时，浏览器并不知道用户是想做双击缩放操作还是普通的单击操作。因此，IOSSafari浏览器首先引入了300毫秒延迟，用来判断用户是否会再次点击，也就是说，在第一次点击延迟300毫秒，300毫秒后用户没有再次点击则认定为用户在进行普通的单击操作，并触发单击（Click）事件。
全面的移动开发者与单击事件延迟战争拉开了序幕。鉴于iPhone的巨大成功，其他浏览器厂商也都快步跟进纷纷效仿了iPhoneSafari浏览器的做法。于是，单击事件延迟成为了移动开发者不得不面对的痛。
消亡史
虽然从当时来看300ms延迟并没有什么不妥，然而在越来越注重用户体验的移动互联网时代，这种延迟是无法被用户所接受的，加之开发者也可以对网站进行响应式适配，双击缩放的操作变成了一种可有可无的操作，浏览器厂商开始意识到延迟所带来的体验问题，提出了一些解决方案。
禁用缩放
解决此问题的第一个方法是常识性方法。由于延迟产生的原因是双击缩放操作，那么就禁用页面缩放功能，最直接的方法就是设置Viewport禁止缩放，代码如下：
<metaname="viewport"content="user-scalable=no">
<!--或者-->
<metaname="viewport"content="initial-scale=1,maximum-scale=1">
适用于Android的Chrome浏览器是第一个引入此更改的应用程序，随后紧接着是Android的Firefox。没有其他浏览器供应商宣布要添加此优化的计划。尽管此解决方案非常巧妙，背后却以牺牲整个页面缩放为代价，带来的影响是对于页面上的图像或小文本，想要进行缩放变得难以完成。即大多数网站都无法从Android版Chrome和Android版Firefox的优化中受益。
幸运的是，随后Chrome团队在Chrome32之后的版本中，提出了新的优秀方案，代码如下：
<metaname="viewport"content="width=device-width">
约定当Viewport的width小于或等于device-width时，去除双击缩放功能。这项技术的另一个关键在于，它仅消除了双击缩放的功能，用户依然可以使用双指缩放功能。因此，不存在与禁用缩放相关的可用性和可访问性问题。
指针事件
指针事件是Microsoft提出的一系列针对Web的新事件，现已成为W3C规范。指针事件规范是尝试使用单个事件模型统一我们对所有输入类型（鼠标，触摸，手写笔等）的处理。根据规范，CSS属性touch-action用于设置触摸屏用户如何操纵元素的区域(例如，浏览器内置的缩放功能)。touch-action默认值是auto，当设置为none时会禁止用户缩放，能成功解决300ms延迟的问题，如：
a[href],
button{
touch-action:none;
}
甚至可以添加touch-action:none到body以完全禁用双击来缩放（注意：这也将禁用双指缩放功能，因此它与我们前面讨论的与禁用缩放相关的可访问性和可用性问题相同）。
2014年3月13日，W3C规范增添了新的touch-action属性值manipulation。该属性值提供了两全其美的体验；它允许双指缩放，以避免touch-action:none出现的可访问性和可用性问题，但它仍然可以通过禁用双击缩放来消除300ms的延迟。
FastClick
FastClick是一个小型JavaScript库，专门旨在防止移动浏览器中的300ms点击延迟。FastClick的实现基础建立于touchstart，touchmove或者touchend事件中的任意一个调用event.preventDefault，mouse事件以及click事件将不会触发。FastClick的原理在touchend阶段调用event.preventDefault，然后通过document.createEvent创建一个自定义事件MouseEvents，然后通过event?Target?.dispatch?Event触发对应目标元素上绑定的click事件。
关于FastClick的好处是，它非常容易使用，只需在文档加载后调用FastClick.attach()在body元素上实例化：
if('addEventListener'indocument){
document.addEventListener('DOMContentLoaded',function(){
FastClick.attach(document.body);
},false);
}
FastClick足够聪明，可以检测到如果是桌面浏览器或者存在meta标记和touch-action解决方案的时候，不会执行任何操作。因此，在我们为所有平台提供真正的解决方案之前，这是一个极好的解决方法。
现代浏览器
得益于现代浏览器对W3C规范touch-action:manipulation的支持性，才真正彻底解决了点击事件延迟的问题。touch-action:manipulation规定浏览器只允许进行滚动和持续缩放操作。任何其它被touch-action:auto支持的行为不被支持。启用平移和双指缩放手势，但禁用其他非标准手势，例如双击缩放。禁用双击缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要。代码如下：
html{
touch-action:manipulation;
}
从此，移动端点击事件延迟正式宣告消亡。
