fastclick解决移动端click事件延迟300ms和点击穿透问题

移动端click点击事件300ms

描述：在正常情况下，如果不进行特殊处理，移动端在触发点击事件时，会有300ms的延迟

解决方案1

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

<!-- 1.禁用缩放 user-scalable=no -->
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">

解决方案2

描述：通过代码可以监测元素点击发生时的状态，从而避免300ms的延迟。
缺点：一次只能给一个元素去解决问题

function tap (obj,callback) {
    var isMove = false;//记录手指是否移动
    var startTime = 0;//记录手指触摸的时间
    obj.addEventListener('touchstart',function(e){
        startTime = Date.now();//记录触摸时间
    })
    obj.addEventListener('touchmove',function(e){
        isMove = true;//查看手指是否滑动
    })
    obj.addEventListener('touchend',function(e){
        if(!isMove && (Date.now()-statrTime) < 150){
        callback && callback();
        }
        isMove = false;//取反 重置
        startTime = 0;
    })
};
tap(div,function(){
    //执行代码
})

解决方案3

备注：对于页面上不需要使用fastclick来立刻触发点击事件的元素在元素标签的class上添加needsclick

// CommonsJS使用
var attachFastClick = require('fastclick');
attachFastClick(document.body);
// vue使用
npm install fastclick -S
import FastClick from 'fastclick'
FastClick.attach(document.body);