移动端使用Click事件300ms延迟问题

原因：移动端在进行两次点击的时候会有一个放大效果 再次点击两次有缩小效果 这个大家应该都懂

SO 用户在点击一下的时候和点两下发生冲突了 用户到底是要点击一下还是会有后续动作要点击两下 并不清楚
所以会有一个时间的等待 去判断用户还有没有后续操作 Click事件的300ms Bug 就产生辽
其实对于用户来说300ms可以说几乎感觉不到 但是对于咱们程序猿来说 碰到恶心的需求 就要求你解决…

上方法：

1.直接禁止网页双击缩放 meta中的user-scalable=no 干净又卫生

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

缺点: 网页无法缩放

2.更改默认视口宽度

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

缺点: 需要浏览器的支持

3.css touch-action
touch-action的默为 auto，将其置为 none 即可移除目标元素的 300 毫秒延迟
缺点: 新属性，可能存在浏览器兼容问题

4.tap事件
zepto的tap事件, 利用touchstart和touchend来模拟click事件

缺点: 点击穿透

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

缺点: 脚本相对较大

在vue中使用

```js

// 安装

npm install fastclick -S

// 引入

import FastClick from 'fastclick'

// 使用

FastClick.attach(document.body);

```

如果对你有一点点帮助的话点赞加收藏吧，互动必回噢~~~