300ms延迟的来源
移动端有很多手势事件，如点击跳转，双击放大缩小页面，滑动等等。就是因为移动端需要判断手势类型，导致了300ms的延迟产生。
延迟的产生源于单击和双击的判断。点击后，移动端设备需要等待300ms，如果300ms内有第二次点击，则会被鉴定为双击，如果300ms内没有其他点击事件，则被鉴定为普通的点击跳转事件。
在用户体验中，100ms的延迟就会使得用户感到卡顿，300ms延迟严重影响体验效果。
FastClick的使用场景
1、在混合使用touch与click时，会导致点击穿透！
2、FastClick的思路就是利用touch来模拟tap（触碰），如果认为是一次有效的tap，则在touchend时立即模拟一个click事件，分发到事件源（相当于主动触发一次click），同时阻止掉浏览器300ms后产生的click。自然也不存在点击穿透的问题。
FastClick用法
Javascript原生
if ('addEventListener' in document) {
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
}, false);
}
jQuery
$(function() {
FastClick.attach(document.body);
});
类似Common JS的模块系统方式
var attachFastClick = require('fastclick');
attachFastClick(document.body);
Vue
// 引入
import FastClick from 'fastclick'
// 使用
FastClick.attach(document.body);
使用needsclick过滤特定的元素
对于页面上不需要使用fastclick来立刻触发点击事件的元素在元素标签的class上添加needsclick
<a class="needsclick">Ignored by FastClick</a>
不需要使用fastclick的情况
以下这几种情况是不需要使用fastclick：
1、FastClick是不会对PC浏览器添加监听事件
2、Android版Chrome 32+浏览器，如果设置viewport meta的值为width=device-width，这种情况下浏览器会马上出发点击事件，不会延迟300毫秒。
<meta name="viewport" content="width=device-width, initial-scale=1">
3、所有版本的Android Chrome浏览器，如果设置viewport meta的值有user-scalable=no，浏览器也是会马上出发点击事件。
4、IE11+浏览器设置了css的属性touch-action: manipulation，它会在某些标签（a，button等）禁止双击事件，IE10的为-ms-touch-action: manipulation
网友评论