iphone移动端click事件延迟300ms解决方案

这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种小屏幕浏览桌面端站点的问题。这当中最出名的，当属双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。 

1.粗暴型：禁用缩放 

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

这个属于简单粗暴型的，虽然看似完美，但有一个致命的缺陷，当你必须完全禁用缩放来达到目的时候，就傻眼了，只有特定场景下的交互界面，此方案才可行，其它大多数情况，此法都不可行。 另外：Chrome 开发团队不久前宣布，在 Chrome 32 这一版中，他们将在包含 width=device-width 或者置为比 viewport 值更小的页面上禁用双击缩放。当然，没有双击缩放就没有 300 毫秒点击延迟。

2.FastClick：闪亮登场 
FastClick是FT Labs专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到 touchend 事件的时候，会通过 DOM 自定义事件立即触发一个模拟 click 事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。 
FastClick 的使用方法非常简单，引用FastClick.js文件，在 window load 事件之后，在body上调用FastClick.attach()即可。

window.addEventListener( "load", function() { FastClick.attach( document.body );}, false );

attach方法虽可在更具体的元素上调用，直接绑定到body上可以确保整个应用都能受益。当 FastClick 检测到当前页面使用meta设置了user-scalable=no或者 touch-action 属性的解决方案时，会静默退出。可以说，这是真正的跨平台方案出来之前一种很好的变通方案。 
就目前而言，FastClick 非常实际地解决 300 毫秒点击延迟的问题，唯一的缺点可能也就是该脚本的文件尺寸 (尽管它只有10kb)。如果你连这10kb都接受不了的话，那么移动端类库 jQuery和zepto.js都支持tap事件来解决这个问题，尽管它们的响应速度比FastClick慢一些。