移动端 click事件、touch事件和tap事件的区别

1.click 事件在移动端会有 200-300ms 的延迟，主要原因是苹果手机在设计时，考虑到用户在浏览网页时需要放大，所以，在用户点击的 200-300ms 之后，才触发 click，如果 200-300ms 之内还有 click，就会进行放大缩小。

2.touch 事件是针对触屏手机上的触摸事件。现今大多数触屏手机 webkit 内核提供了 touch 事件的监听，让开发者可以获取用户触摸屏幕时的一些信息。其中包括：touchstart, touchmove, touchend, touchcancel 这四个事件，touchstart touchmove touchend 事件可以类比于 mousedown mouseover mouseup 的触发

3.tap 事件在移动端，代替 click 作为点击事件，tap 事件被很多框架（如 zepto）封装，来减少这延迟问题， tap 事件不是原生的，所以是封装的，那么具体是如何实现的呢？

  < script >
      function tap(ele, callback) {
          // 记录开始时间
          var startTime = 0,
              // 控制允许延迟的时间
              delayTime = 200,
              // 记录是否移动，如果移动，则不触发tap事件
              isMove = false;
              
          // 在touchstart时记录开始的时间
          ele.addEventListener('touchstart', function(e) {
              startTime = Date.now();
          });
          // 如果touchmove事件被触发，则isMove为true
          ele.addEventListener('touchmove', function(e) {
              isMove = true;
          });
          // 如果touchmove事件触发或者中间时间超过了延迟时间，则返回，
          // 否则，调用回调函数。
          ele.addEventListener('touchend', function(e) {
              if (isMove || (Date.now() - startTime > delayTime)) {
                  return;
              } else {
                  callback(e);
              }
          })
      }

  var btn = document.getElementById('btn');
  tap(btn, function() {
      alert('taped');
  }); <
  /script>

点透问题

如果我们在移动端所有的 click 都替换为了 tap 事件，还是会触发点透问题的，

因为实质是：在同一个 z 轴上，z-index 不同的两个元素，上面的元素是一个绑定了 tap 事件的，下面是一个 a 标签，一旦 tap 触发，这个元素就会 display: none，而从上面的 tap 可以看出，有 touchstart、touchend，所以会 300ms 之后触发 click 事件，而 z-index 已经消失了，所以，触发了下面的 a 的 click 事件，注意：我们认为 a 标签默认是绑定了 click 事件的。而这种现象不是我们所期待的。

解决方案：（1）使用 fastclick。（2）添加一个延迟。

（1）直接引入 fastclick 库。

window.addEventListener(
    "load",
    function() {
        FastClick.attach(document.body);
    },
    false
);

这样，就可以成功解决问题了。

（2）对于上一个 tap 做延迟。

tap(ele, function() {
    setTimeout(function() {
        ele.style.display = "none";
    }, 300);
});

这样，过了 300ms，那么 click 事件就不会触发在下面的 a 标签上了。

来源整理自：vue3js.cn 面试官系列