在移动端click事件会有300ms的延迟,所以不推荐使用
解决此问题,可以使用fastclick.js去掉延迟或者zepto和jQuery mobile提供的tap事件代替click事件
移动端拥有自己的三个基础触摸事件:touchstart、touchmove、touchend,而tap事件的本质也是这三个触摸事件的组合,下面是简单的实现
const tap = function(ele, callback) {
let start = 0,
delay = 200, // 时间限制避免长按
moved = false; // 是否发生滑动
ele.addEventListener("touchstart", function(e){
moved = false; // 滑动标识置为false
start = +new Date(); // 开始计时
});
ele.addEventListener("touchmove", function(e){
moved = true; // 滑动标识置为true
});
ele.addEventListener("touchend", function(e){
if(moved) return; // 滑动则不触发tap
let cur = +new Date();
if(cur - start > delay) return; // 长按超时则不触发tap
callback(e); // 触发tap
});
}
export default tap;