移动端click事件会有300ms延迟

解决移动端300ms的延迟问题
产生问题的原因: 移动端的双击会缩放导致click判断延迟
浏览器为什么会设置300ms的延迟呢，这个跟双击缩放有关，浏览器捕获第一次单击后，会先等待一段时间，如果在这段时间区间里用户未进行下一次点击，则浏览器会做单击事件的处理。如果这段时间里用户进行了第二次单击操作，则浏览器会做双击事件处理。这段时间就是上面提到的300毫秒延迟。
解决方式：
1。css touch-action
touch-action的默为 auto，将其置为 none 即可移除目标元素的 300 毫秒延迟
缺点: 新属性，可能存在浏览器兼容问题
2。tap事件
zepto的tap事件, 利用touchstart和touchend来模拟click事件
缺点: 点击穿透
3。禁用缩放

 <meta name = "viewport" content="user-scalable=no" >
缺点: 网页无法缩放

4。更改默认视口宽度

 <meta name="viewport" content="width=device-width">

缺点: 需要浏览器的支持
5。fastclick
原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉
缺点: 脚本相对较大
使用:
JS
// 引入

// 使用了jquery的时候
$(function() {
    FastClick.attach(document.body);
});
// 没使用jquery的时候
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}
在vue中使用
js
// 安装
npm install fastclick -S
// 引入
import FastClick from 'fastclick'
// 使用
FastClick.attach(document.body);