移动端产生300ms延迟的原因

     移动浏览器为什么会设置300毫秒的等待时间呢？这与双击缩放的方案有关。平时我们有可能已经注意到了，双击缩放，即用手指在屏幕上快速点击两次，可以看到内容或者图片放大，再次双击，浏览器会将网页缩放至原始比例。

     浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。

解决300ms延迟的方案

一，禁止缩放

缩放时移动端点击事件产生延迟的根本原因，在 chrome 和 firefox 的移动版本中，如果禁用了页面缩放，那么着 300ms 的延迟就会自动消失，具体代码如下：

    或者
    复制代码

但是这一方案在 safari 上并不起作用，还会降低有视觉或运动障碍用户的可访问性。

二，使用fastclick库

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到touchend事件的时候，会通过 DOM 自定义事件立即触发一个模拟click事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。

window.addEventListener(function(){       FastClick.attach( document.body );  },false );复制代码

三，使用移动端点击事件touchend

顾名思义在触摸后触发，相对应的事件有touchstart，touchmove，touchend，完全可以在 WebGL 或 canvase 游戏中进行实践,但是在web 页面中单单使用 touchend 并不一定靠谱。

touchend存在的问题：

1、如果用户在两个不同元素之间触发了 touchstart 和touchend，那么 click 不会被触发 .

2、如果用户触发了 touchstart,但是在touchend之前是一个长长的 touchmove 滚动, 那么 click 也不会被触发.  

3、在站点上任然应该保留 click 事件以兼容那些非触摸设备,这是你就要考虑事件的重复触发问题. 

四，指针事件

指针事件最初由微软提出，现已进入 W3C 规范的候选推荐标准阶段 (Candidate Recommendation)。指针事件是一个新的 web 事件系列，相应的规范旨在使用一个单独的事件模型，对所有输入类型，包括鼠标 (mouse)、触摸 (touch)、触控 (stylus) 等，进行统一的处理。

指针事件目前兼容性不太好，还需要更多的而浏览器进行支持。