移动端click 延时解决方案

移动端 click 事件会有300ms 的延时，原因是移动端屏幕双击会缩放页面（当我们点击屏幕后会等待300ms用以判断是否为双击，如果未再次点击则执行点击事件，否则会执行缩放）。

解决方案：

1. 禁用缩放
   浏览器禁用默认的双击缩放行为并且去掉 300ms 的点击延迟。

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

2. 利用touch 事件封装事件解决延时
   原理：

• 当手指触摸屏幕时，记录当前触摸时间

• 当手指离开屏幕时，记录当前离开的时间

• 计算时间差 = 用离开的时间 - 触摸时的时间

• 如果时间差小于150ms，并且没有滑动屏幕，那么定义为点击

  // 封装tap函数，解决click 300ms 延时
  function tap(obj, callback) {
      var isMove = false;	//定义变量判断是否移动
      var startTime = 0;	//记录触摸时的时间变量
      obj.addEventListener('touchstart', function(e) {	//监听触摸开始事件
          startTime = Date.now();	//记录触摸时间
      })
      obj.addEventListener('touchmove', function() {	//监听触摸移动事件
          isMove = true;	//更改手指移动状态 设置为true
      })
      obj.addEventListener('touchend', function(e) {	//监听触摸结束
          if (!isMove && (Date.now() - startTime) < 150) {	//判断是否为点击
              callback && callback();	//执行回调函数
          }
          //重置变量值
          isMove = false;	
          startTime = 0;
      })
  }
  // 调用函数
  var div = document.querySelector('div');
  tap(div, function() {
      // 执行代码
      // do something
  })
  

4. 使用fastclick 插件
   插件GitHub地址：github.com/ftlabs/fast…
   下载插件后如何使用：
   （1）将fastclick.js文件引入到html 页面中（必须在页面元素实例化之前引用）

   <script type='application/javascript' src='/path/to/fastclick.js'></script>
   

   （2）初始化实例（即取消页面中所有的延时问题）

   if ('addEventListener' in document) {    //判断是否支持addEventListener
   	document.addEventListener('DOMContentLoaded', function() {    //监听DOM加载完毕
   		FastClick.attach(document.body);
   	}, false);
   }
   

   使用jQuery写法

   $(function() {
   	FastClick.attach(document.body);
   });
   

   使用commonJS模块系统的写法

   var attachFastClick = require('fastclick');
   attachFastClick(document.body);
   

   （3）使用点击事件

   var div = document.querySelector('div');
   div.addEventListener('click', function() {
       // do something
   })