overlay.addEventListener('touchend', (e) => {
e.preventDefault();
closeModal();
}, { passive: false });
弹窗点关闭后底层页面的按钮莫名其妙被点中,直接跳到别的页面,慢慢点又完全复现不出来,这个 bug 很看手速。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。
追下去是这么回事:移动端 click 有三百毫秒延迟,弹窗在 touchend 就关掉了,延迟到来的 click 落到下面那层元素上,这就是常说的点击穿透。手快的时候百分百复现。
「点击穿透」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。同一份配置存在多处的,先确认改的是被加载的那一份。
新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。
处理上按这个顺序:在 touchend 回调里直接 preventDefault,把后面补发的 click 掐掉,这一下最直接;关弹窗后延迟三百毫秒再让遮罩消失,别立刻移除;遮罩在过渡期间保留 pointer-events,把点击拦住,消失前一直拦着。
确认没问题再收工,连续快速点关闭按钮,底层页面不再跳转,也没有误触反馈,手速快也不怕。
