移动端开发05 移动端的事件点透

触摸事件的响应顺序

1. ontouchstart
2. ontouchmove
3. ontouchend
4. onclick

graph LR
ontouchstart-->ontouchmouve
ontouchmouve-->ontouchend
ontouchend-->onclick

现象

当A/B两个层上下z轴重叠，上层的A点击后消失或移开（这一点很重要），并且B元素本身有默认click事件（如a标签）或绑定了click事件。在这种情况下，点击A/B重叠的部分，就会出现点透的现象。

原因

是由于浏览器事件派发机制导致的，并非冒泡的原因。

zepto的tap事件是通过兼听绑定在document上的touch事件来完成tap事件的模拟的，并且tap事件是冒泡到document上触发的

在移动端不使用click而用touch事件代替触摸是因为click事件有300ms延迟

由于我们在touchstart阶段就已经隐藏了A，300ms后click事件触发时，浏览器将click事件派发到了B，导致了异常的发生。

解决方法：

1 使用fastClick

fastClick将touch事件绑定到了body元素或顶层元素，在touch事件中标记手势的位置和时间，根据此信息拦截了300ms后的真正的click事件

具体的源码分析参考这篇文章。

2 使用touchend代替tap

对于B元素本身存在默认click事件的情况，应用touchend代替tap事件并阻止A元素touchend的默认行为preventDefault()，从而阻止click事件的产生。

$("#aa").on("touchend", function (event) {
  //很多处理比如隐藏什么的
  event.preventDefault();
});

由于PC端是不支持touchend事件的，可以同时绑定touchend和click事件

$("#save_and_back").on("touchend", function(e) {
  save_article(article_data).then(function(res) {
    location.href = "home.html";
  });
  e.preventDefault();
});
$("#save_and_back").on("click", function(e) {
  save_article(article_data).then(function(res) {
    location.href = "home.html";
  });
  e.preventDefault();
});

原理是：

在PC端上，没有touchend事件，只有click事件被绑定上了。

在移动端上，绑定了touchend和click事件，但是touchend事件优先级比click高，并且阻止了事件继续冒泡。所以两个端上都能完美实现效果，具体还有没有其他的问题暂时不得而知。

3 延时执行

通过延时执行tap的事件，错开click被触发的时机

$("#aa").on("tap", function(event) {
  setTimeout(function() {
    //很多处理比如隐藏什么的
  }, 320);
});

参考

• 移动端300ms点击延迟和点击穿透问题@简书
• zepto之tap事件点透问题分析及解决方案@博客园
• fastclick解析与ios11.3相关bug原因分析@segmentfault
• Zepto Click点透情况解决办法@CSDN