移动端点击延迟事件

  1. 移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。
  2. 原因: 移动端的双击会缩放导致click判断延迟。
    这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。

解决方式


使用fastclick ，源码地址：https://github.com/ftlabs/fastclick

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


使用方式

在JS中使用

1
2
3
4
5
6
7
8
9
10
11
12
 // 引入   
<script type='application/javascript' src='/path/to/fastclick.js'></script>    
// 使用了jquery的时候    
$(function () {
  FastClick.attach(document.body);
});
// 没使用jquery的时候    
if ('addEventListener' in document) {
  document.addEventListener('DOMContentLoaded', function () {
    FastClick.attach(document.body);
  }, false);
}

在 Vue中使用

1
2
3
4
5
6
// 安装    
npm install fastclick -S    
// 在mian.js中引入    
import FastClick from 'fastclick'    
// 使用    
FastClick.attach(document.body);