移动端300ms点击延迟原因以及解决办法

移动端300ms点击延迟原因

https://www.jianshu.com/p/6e2b68a93c88
https://www.jianshu.com/p/67bae6dfca90

解决方式

1. 禁用缩放

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

缺点：网页无法缩放

2. 更改默认视口宽度

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

缺点： 需要浏览器的支持

3. 依赖fastclick

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

vue中使用

// 安装
npm install fastclick -S
// 引入
import FastClick from 'fastclick'
// 使用
if ('addEventListener' in document) {
    document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
    }, false);
}