移动端点透事件原理及阻止 touch click

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/adley_app/article/details/85598046

什么条件发生点透

• A z-index大于B，即A显示在B浮层之上
• A发生touch， A touch后立即消失， B事件绑定click

点透事件发生的原理

当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click，touch先执行，touch执行完成后，A从文档树上面消失了，而且由于移动端click还有延迟200-300ms的关系，当系统要触发click的时候，发现在用户点击的位置上面，目前离用户最近的元素是B，所以就直接把click事件作用在B元素上面了。

如何解决点透

阻止click事件发生

A.addEventListener('touchend', function(e) {
  e.preventDefault();
});