移动端 click 延时解决方案

移动端 click 事件会有 300ms 的延时，原因是移动端屏幕双击会缩放(double tap to zoom) 页面。

解决方案：

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

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

2. 利用touch事件自己封装这个事件解决300ms 延迟。

   原理就是：

   1. 当我们手指触摸屏幕，记录当前触摸时间
   2. 当我们手指离开屏幕， 用离开的时间减去触摸的时间
   3. 如果时间小于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 (e) {
               isMove = true;  // 看看是否有滑动，有滑动算拖拽，不算点击
           });
           obj.addEventListener('touchend', function (e) {
               if (!isMove && (Date.now() - startTime) < 150) {  // 如果手指触摸和离开时间小于150ms 算点击
                   callback && callback(); // 执行回调函数
               }
               isMove = false;  //  取反 重置
               startTime = 0;
           });
   }
   //调用  
     tap(div, function(){   // 执行代码  });
   

3. 使用插件。fastclick 插件解决300ms 延迟。

   GitHub官网地址：https://github.com/ftlabs/fastclick