如何解决移动端击穿（穿透）问题

我会带着你远行 2023-05-31 10:07 6阅读 0赞

**在移动端开发的时候，我们有时候会遇到这样一个bug：点击关闭遮罩层的时候，遮罩层下面的带有点击的元素也会被触发，给人一种击穿了页面的感觉，这是为什么呢？**

为了让大家更直观的看到效果，我复现了bug,并录制了一个gif。供大家参考：  
![在这里插入图片描述][20191024140554659.gif]

*  点击“打开弹框”按钮，显示遮罩层
 *  点击“关闭弹框”按钮，遮罩层消失，底下的连接被触发

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mQhiZ4W0-1571897111992)(./111.gif)\]

上图事例js部分代码

var show = document.getElementById('show') // 打开按钮
    var mask = document.getElementById('mask') // 遮罩层
    var btn = document.getElementById('btn')   // 关闭按钮
    
    show.onclick = function () { 
        mask.style.display = 'block'
    }
    
    btn.addEventListener('touchstart', function () { 
        mask.style.display = 'none'
    }, false)
    
    </body>
    </html>

### 这样问题的形成原因是什么呢？ ###

我们先来看一段代码：(以下代码需在移动端上运行)

<div id="btn">我是一个按钮</div>

var btn = document.getElementById('btn')
    btn.addEventListener('touchstart', function () { 
    	console.log('start')	
    }, false)
    
    btn.addEventListener('touchmove', function () { 
        console.log('move')
    }, false)
    
    btn.addEventListener('touchend', function () { 
        console.log('touchend')
    }, false)
    
    btn.addEventListener('click', function () { 
        console.log('click')
    }, false)

以上代码会出现2种运行情况

*  start ===> move ===> end
 *  start ===> end ===> click

看到这里相信大家都明白了，由于「关闭弹框」按钮绑定的事件是touch，a标签是click事件，在touch事件触发后，我们弹出框的遮罩层就消失了，这时候的click事件就被a标签给捕获到了，形成了击穿的效果。

### 方法一、阻止默认事件 ###

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毫秒内淡出消失。（我为了演示方便就没有添加动画了，采用了定时器方法。）

### 方法四、 css属性pointer-events ###

click.setAttribute('style', 'pointer-events:none')
    mask.style.display = 'none'
    setTimeout(function () { 
        click.setAttribute('style', 'pointer-events:auto')
    }, 350)

这样做法是，在遮罩消失之前，先让a标签忽略点击事件，这样遮罩层的点击事件，就不会被a标签捕获到。还是等350毫秒之后，再次赋予a标签的点击能力。这个方法跟方法三原理相似，只是利用了不同的css属性而已。个人觉得方法三比较好一点。方法四有明显的2个缺点：

1、遮罩层下面可能有多个带有事件的元素，那么你需要给所有可点击元素添加pointer-events属性 然后删除。不仅容易出错，还影响性能

2、如果用户在350毫秒内点击了元素，会造成页面失效的错觉，影响体验。

### 方法五、fastClick库 ###

这个库的引用方法，在我上一篇文章中已经讲到。fastClick的原理就是使用了方法一的做法。fastClick 在 touchend 阶段 调用 event.preventDefault，然后通过 document.createEvent 创建一个 MouseEvents，然后 通过 eventTarget.dispatchEvent 触发对应目标元素上绑定的 click 事件。

后来有读者提了一个fastClick的bug。在这里我贴一下[解决方案][Link 1]的地址

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE0NTY1NTI_size_16_color_FFFFFF_t_70]

[20191024140554659.gif]: /images/20230531/da702aec9d474800881610c4615b1a03.png
[Link 1]: https://github.com/ftlabs/fastclick/issues/548
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTE0NTY1NTI_size_16_color_FFFFFF_t_70]: /images/20230531/32ccffb380ff4b818bca215a38bd7447.png