web移动端点击穿透问题

在移动端开发的时候，我们有时候会遇到这样一个bug：点击关闭遮罩层的时候，遮罩层下面的带有点击的元素也会被触发，给人一种击穿了页面的感觉，这是为什么呢？主要是因为用户touch事件关闭按钮的时候，触发了下面的click事件(捕获)，形成了穿透。

方法一、阻止默认事件

btn.addEventListener('touchend', function (e) {
    mask.style.display = 'none'
    e.preventDefault()
}, false)

在执行 touchstart 和 touchend 事件时，隐藏执行完隐藏命令后，立即阻止后续事件(推荐在touchend时，阻止后续的默认事件)

方法二、统一使用click事件

btn.addEventListener('click', function () {
    mask.style.display = 'none'
}, false)

这个方法简单，就是交互的效率没有click事件高，另外，用户在touch的时候，有可能微微滑动了一下，就会无法触发点击事件。影响用户体验。

方法三、延迟执行

btn.addEventListener('touchend', function () {
	setTimeout(function () {
        mask.style.display = 'none'  // 可以使用fadeOut动画
    }, 300)
}, false)

点击之后，我们不立即隐藏。让遮罩在350ms毫秒内淡出消失。（我为了演示方便就没有添加动画了，采用了定时器方法。）

当然还有其他方法，比如fastClick库，其原理和方法一类似，也是通过event.preventDefault，通过 document.createEvent 创建一个 MouseEvents，然后 通过 event​Target​.dispatch​Event 触发对应目标元素上绑定的 click 事件。