vue.js 使用 fastclick解决移动端click事件300毫秒延迟方法

一，

在正常情况下，如果不进行特殊处理，移动端在触发点击事件时，会有300ms的延迟。换句话说，当我们在点击移动端页面后不会立即做出反应，而是会等待300ms才会触发click事件。在移动web兴起初期，用户对300ms的延迟没有太大的感觉，但随着用户对交互体验的要求的提高，如今，移动端的300ms延迟严重影响了用户体验。

方案一 禁用缩放

在html文档头部的meta标签中加入如下语句：

<!-- 1.禁用缩放 user-scalable=no -->

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

user-scalable=no表明这个页面不可缩放，也就是浏览器禁用的双击缩放事件并且同时会去掉300ms点击延迟。
但这个方案也有缺点，就是完全禁用了双击缩放，当我们需要放大文字或者图片时无法满足我们的需求。

 

方案二

fastclick插件解决问题

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。FastClick的实现原理是在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后的click事件阻止掉。

一.使用npm安装：

npm install fastclick -S

二.用法：

安装完以后，可以在在main.js中全局引入，并绑定到body，全局生效。或者在单页面引入，只针对当前页面生效

1.  
   //引入
2.  
   import FastClick from 'fastclick'
3.  
   //初始化FastClick实例。在页面的DOM文档加载完成后
4.  
   FastClick.attach(document.body)