Vue.js - 移动端Click事件300毫秒延迟解决方案（fastClick.js）

0、前言

移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。

原因：移动端的双击会缩放导致click判断延迟。

1、兼容性

iOS 3及更高版本的移动Safari

iOS 5及更高版本的Chrome

Android上的Chrome（ICS）

Opera Mobile 11.5及以上版本

Android 2以来的Android浏览器

PlayBook OS 1及以上版本

2、不应用FastClick的场景

桌面浏览器

如果视口元标签中设置了width=device-width，Android上的Chrome 32+会禁用300ms延时。

<meta name="viewport" content="width=device-width, initial-scale=1">

视频元标签如果设置了user-scalable=no，Android上的Chrome（所有版本）都会禁用300ms延迟。

IE10中，可以使用css属性-ms-touch-action: none禁止元素双击缩放。

3、安装

先执行安装fastclick的命令

npm install fastclick -S

Ps：-S == --save

之后，在main.js中引入，并绑定到body

import FastClick from 'fastclick'

FastClick.attach(document.body)