移动端点击穿透问题详解：

1.点击穿透bug

事件机制：动作，监听
动作每时每刻都会发生，只要用户点击，就会发生在动作。监听了这个动作才能执行我们的代码，不监听就是白点。click就是动作模拟出来的，当用户进行触摸后，浏览器300ms后就会模拟click这个动作，就算不监听，触摸后也会模拟。
总之，不管监听不监听，动作都会发生。鼠标事件在移动端是被模拟的，在发生触摸这个动作之后，等300ms后模拟的。
超链接和button自动监听了click事件。
点击穿透发生的原因：
移动端会模拟鼠标动作； 在触摸事件发生300ms之后，默认鼠标事件在移动端监听鼠标事件，会有延迟。
点击穿透发生的条件：
上层元素监听触摸事件，一旦触发触摸事件，上层元素消失；300ms后浏览器产生了鼠标动作，而此时上层元素没有了，鼠标动作作用在下层元素。
测试：页面上有超链接，遮罩层上有个关闭按钮，给按钮绑定touchend事件，触摸按钮遮罩层消失，300ms后click作用到了a标签上，a标签直接发生了跳转，这个过程就是点击穿透。
注意：遮罩层是用定位，透明度实现的。

2.解决点击穿透

①.上层元素监听的触摸事件里，阻止默认行为。推荐使用
btn.addEventListener(‘touchend’, function (event) {
      event.preventDefault();
});
②.阻止所有元素的默认行为，document监听触摸事件。推荐使用
移动所有的浏览器行为都是基于触摸的。任何元素的触摸动作都会冒泡到document上。
全局阻止浏览器默认动作/阻止所有的元素的默认动作，chrome 新版不允许给document绑定触摸事件阻止默认动作。要想生效，设置为被动模式 passive:false。
document.addEventListener(‘touchstart’,function (event) {
      event.preventDefault();
},{passive:false});
原理：冒泡速度快于300ms后的click。
适用场景：无限贴近于原生APP的应用，给document绑定之后，a标签与生俱来的点击跳转被阻止了，连用户在ios上缩放也阻止了。
a标签与生俱来的点击跳转被阻止了,给超链接监听 touchend，超链接就不用使用慢300ms的click了，这样还可以提高用户体验。
ass.forEach(function (item) {
      item.addEventListener(‘touchend’,function () {
      location.href = this.href;//location可以获取url中的参数
      })
});
③.下层元素使用没有点击特性的元素，比如用div代替a。
给超链接监听 touchend
ass.forEach(function (item) {
      item.addEventListener(‘touchend’,function () {
      location.href = this.dataset.href;
      })
});
div中没有href属性，用的是data-href。在绑定监听时获取href。
方式一：dataset.href要求属性data-href必须是data-
location.href = this.dataset.href;
方式二：利用getAttribute获取自定义属性的值。
location.href = this.getAttribute(‘data-href’);
④.利用css的 pointer-event，设置为none,元素没有点击特性。用定时400ms后遮罩消失，click也发生了，再让a具有点击特性。
btn.addEventListener(‘touchend’, function () {
// 先让a失去点击特性
      ass.forEach(function (item) {
            item.style.pointerEvents = ‘none’;
});
cover.style.display = ‘none’;
// 遮罩消失之后且click动作发生之后 让a具有点击特性
setInterval(function () {
      ass.forEach(function (item) {
      item.style.pointerEvents = ‘auto’;
      });
},400)
⑤.让上层元素延迟300ms之后再消失，会影响用户体验。
setInterval(function () {
      cover.style.display = ‘none’;
},400);