fastclick.js解决移动端点击事件反应慢问题

参考http://blog.csdn.net/xjun0812/article/details/64919063

了解fastclick：http://www.cnblogs.com/yexiaochai/p/3442220.html

问题的发现

上班作项目的时候碰到一个移动端项目，其中有个小游戏，至关于天上掉馅饼，用户须要点击馅饼得到。游戏作好以后在pc端测试是没问题的，安卓手机上测试也是没问题的，可是部分苹果手机就出现了问题，用户点击馅饼没有反应。

后来调试的时候，我让这些馅饼静止在屏幕上，这些苹果手机用户就能够点击了。才发现是由于点击事件延迟的缘由致使移动的对象不能被用户点击，通过必定时间的延迟，该对象已经移到到其余地方去了。

移动端页面对于点击事件会有300毫秒的延迟，也就是js捕获click事件的回调函数处理，须要300ms后才生效，致使多数用户感受移动设备上基于HTML的web应用界面响应速度慢，甚至有时候会影响一些业务逻辑的处理。

为何会存在延迟？

Google开发者文档中有提到：

mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

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

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

如何避免延迟

在特定场景如一些游戏页面，咱们须要取消300毫毛的延迟。目前有如下方法：

方法一：静止缩放

[html] view plain copy

1. <meta name="viewport" content="width=device-width user-scalable= 'no'">

使用这个方法必须彻底禁用缩放来达到目的，虽然大部分移动端能解决这个延迟问题，可是部分苹果手机仍是不行。

方法二：fastclick.js

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

第一步：在页面中引入fastclick.js文件。

第二步：在js文件中添加如下代码
在 window load 事件以后，在body上调用FastClick.attach()便可。

[javascript] view plain copy

window.addEventListener(function(){

     FastClick.attach( document.body );},false );

fastclick.js下载地址：https://github.com/ftlabs/fastclick

若是你项目使用了JQuery，就将上面的代码改写成：

[javascript] view plain copy

$(function() {

        FastClick.attach(document.body);});

若是你使用Browserify或者其余CommonJS-style 系统,当你调用`require('fastclick')`时，`FastClick.attach`事件会被返回，加载FastClick最简单的方式就是下面的方法了：

        var attachFastClick = require('fastclick');

       attachFastClick(document.body); 

方法三：指针事件

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

指针事件 (Pointer Events) 目前兼容性不太好，不知道在之后会不会更加支持。

注意事项

要注意使用场景。

转载来源：https://www.cnblogs.com/jianzhixuan/p/6944960.html