click 延时解决方案（了解）

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

解决方案：

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

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

2.  利用 touch 事件自己封装这个事件解决 300ms 的点击延迟：     

   原理就是：

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

   ② 当手指离开屏幕时，用离开的时间减去触摸的时间 ；

   ③ 如果时间小于 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 延迟                                                                                                                                                                                                                              JS 插件是 js 文件，它遵循一定规范编写，方便程序展示效果，拥有特定功能且方便调用。如轮播图和瀑布流插件。                                                                                                        特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小。

fastclick 插件的 GitHub 官方地址：http:// https://github.com/ftlabs/fastclick

插件使用方法：

扫描二维码关注公众号，回复： 15623018 查看本文章

① 引入 js 插件文件

② 按照规定的语法使用

将下列代码复制到<script> ... </script> 里面去

if ('addEventListener' in document) {
 document.addEventListener('DOMContentLoaded', function() {
 FastClick.attach(document.body);
 }, false);
}