移动端tap事件的实现

在移动端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;

你可能感兴趣的:(移动端tap事件的实现)