2、为何存在这个问题git
这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的。因而苹果的工程师们作了一些约定，应对 iPhone 这种小屏幕浏览PC端站点的问题。这当中最出名的，当属双击缩放(double tap to zoom)。github
双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。web
那么问题来了，假设用户在 iOS Safari 里边点击了一个连接，当用户一次点击屏幕以后，浏览器并不能马上判断用户是确实要打开这个连接，仍是想要进行双击操做。api
所以，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。浏览器
3、这是一个问题吗app
上文的假设场景看起来没毛病，那么，这是一个问题吗？webapp
回答：是。iphone
现在是个移动端开发的 web 应用性能能够同原生应用匹敌的时代，全部的单击事件都有 300 毫秒延迟，必然是不可接受的。
4、验证问题
虽然说各类资料均代表ios移动端页面click事件有300ms延时，然而我仍是想看一下到底有多少延时，虽然感受是慢了点，可是，用数听说话更加可信。代码以下：
而后在iphone里面打开测试页面：
点击按钮，显示延时，发现延时分布在370ms左右，比传说的300ms要大，这和设备有关。
5、如何解决问题
问题真实存在，那么就须要解决问题。
一、移动端通常都用了类jq的库——zepto，zepto封装了一系列的触摸事件，其中的tap事件就是click事件去掉300ms延时的事件，然而，zepto的tap事件有一个点透的问题，故该方案不可行。
二、使用fastclick库。
6、fastclick
我比较懒，简介扣了人家的自我介绍：
兼容性也很好：
用法也很简单，这里我就不说了，只须要注意一点：使用FastClick的时候，在须要使用的层上，实例化它。咱们使用document.body是由于但愿全部的按钮和连接都得到快速点击。
来个使用后的效果图：
7、思考
一、为何zepto的tap事件会点透，而fastclick的click事件不会点透？
咱们先来了解下什么叫点透问题。假如你在列表页面上建立一个弹出层，弹出层有个关闭的按钮（绑定了tap事件），你点了这个按钮关闭弹出层后，这个按钮正下方的内容也会执行点击事件（或打开连接）。这个就是一个“点透”现象。
点透出现的缘由是：延迟300ms的click事件触发了。
zepto的touch模块中，没有对这个延迟300ms的click事件取消，或者取消不了。而fastClick中，会对这个延迟300ms的click事件取消，也就是这个click事件不会触发。
因此zepto的tap事件（经过touchstart和touchend模拟出来的）有点透问题，而fastClick的click事件（经过touchstart和touchend模拟出来的）没有。
深刻到zepto的touch.js和fastClick的源码，咱们能够得知：zepto的tap事件和fastClick的click事件，源码差很少。为何基本相同的代码，zepto会点透而fastclick不会呢？缘由是zepto的代码里面有个settimeout，在settimeout里面执行e.preventDefault()不会生效，所以zepto中的延迟300ms的click事件会触发，而fastClick不会。
二、为何不能用touchend代替click来解决延时问题？
一种解决办法是，用touchend替代click，而后preventDefault来阻止默认行为click。
听起来简单易行，然而功能复杂的时候就会出问题，好比滑动加选择，会由于滑动触发touchend，从而触发选择行为。因此若是原本应该绑定在click上的事件所有绑定到touchend事件上，就会出现问题。
8、参考资料
一、http://developer.telerik.com/featured/300-ms-click-delay-ios-8/
二、https://www.sitepoint.com/5-ways-prevent-300ms-click-delay-mobile-devices/
三、http://www.linovo.me/front/webapp-300ms.html
四、https://github.com/ftlabs/fastclick
五、https://github.com/filamentgroup/tappy/
六、http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/