fastclick 的使用

fastclick使用

1. 为什么需要使用？

移动浏览器有300毫秒的等待时间，这与双击缩放（在屏幕上快速点击两次）的方案有关。浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。

2. 解决方案

有几种解决方案，各有优缺点，下面只说其中两种

2.1 禁用缩放 
    <meta name="viewport" content="width=device-width user-scalable= 'no'">

2.2 使用fastclick.js
     原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉

    // 引入
   <script type='application/javascript' src='/path/to/fastclick.js'></script>
    // 使用了jquery的时候
    $(function() {
        FastClick.attach(document.body);
    });

    // 没使用jquery的时候
    if ('addEventListener' in document) {
        document.addEventListener('DOMContentLoaded', function() {
            FastClick.attach(document.body);
        }, false);
    }


    在vue中使用
    // 安装
    npm install fastclick -S

    // 引入
    import FastClick from 'fastclick'

    // 使用
    FastClick.attach(document.body);

3. 具体使用