overlay.addEventListener('touchend', (e) => {
  e.preventDefault();
  closeModal();
}, { passive: false });

弹窗点关闭后底层页面的按钮莫名其妙被点中,直接跳到别的页面,慢慢点又完全复现不出来,这个 bug 很看手速。这类现象通常不是突然出现的,往前翻半天日志能看到苗头。

追下去是这么回事:移动端 click 有三百毫秒延迟,弹窗在 touchend 就关掉了,延迟到来的 click 落到下面那层元素上,这就是常说的点击穿透。手快的时候百分百复现。

「点击穿透」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。同一份配置存在多处的,先确认改的是被加载的那一份。

新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。

处理上按这个顺序:在 touchend 回调里直接 preventDefault,把后面补发的 click 掐掉,这一下最直接;关弹窗后延迟三百毫秒再让遮罩消失,别立刻移除;遮罩在过渡期间保留 pointer-events,把点击拦住,消失前一直拦着。

确认没问题再收工,连续快速点关闭按钮,底层页面不再跳转,也没有误触反馈,手速快也不怕。

作者 9823189