点击穿透本质是事件时机错位：移动端为支持双击缩放，click事件延迟约300ms触发；若在touchend中隐藏弹层，此时click落在已消失弹层下的元素上，导致误触发。
点击穿透不是样式没藏好，是事件时机错位
你用 visibility: hidden 或 opacity: 0 隐藏弹层后，用户点关闭按钮，下层按钮却响应了——这不是 DOM 没删干净，而是浏览器在 touchend 后约 300ms 才派发 click，此时弹层已消失，click 自然落到下层元素上。
这个现象和「双击缩放」机制强绑定，只要页面允许缩放（即 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 存在），且同时混用 touchend 和 click，就必然触发。
- 检查是否对关闭按钮绑了
touchend，但下层元素只监听click - 确认没有在
touchend中同步移除弹层 DOM，而是靠 CSS 切换显示状态 - 注意：即使用了
display: none，若移除时机晚于touchend、早于 300ms 后的click，仍可能穿透
用 touchend 替代 click 是最直接解法
不改结构、不加库、不设 flag，直接把所有交互入口从 click 换成 touchend，就能绕过 300ms 延迟和后续的穿透风险。
但要注意它和 click 的行为差异：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
touchend在手指抬起瞬间触发，无延迟，也无双击判断逻辑 -
a标签的默认跳转不会自动触发，必须显式写event.preventDefault(); location.href = 'xxx'; - PC 端不支持
touchend，需兼容时用'ontouchstart' in window分支或同时监听两个事件 - 不要用
touchstart替代——它在手指接触即触发，易误触；滑动时也会触发，干扰滚动
pointer-events: none 不是万能开关，用错位置反而失效
给弹层容器设 pointer-events: none 看似能“禁用点击”，但若关闭按钮是它的子元素，哪怕单独设 pointer-events: auto 也无效——现代浏览器中，父级设 none 会整棵子树退出事件流，子元素无法恢复。
真正可用的场景极少：
- 仅用于静态遮罩背景（比如半透明蒙层），且其内部无任何可点击子元素
- 若必须保留按钮，得把它从弹层 DOM 中移出，与弹层平级，再单独控制显隐
- 更稳妥的做法是：弹层隐藏时用
display: none，它天然不参与事件捕获，也不依赖 CSS 层级
排查时优先看 meta 和事件绑定组合
点击穿透问题往往不是单一代码导致，而是 viewport 设置 + 事件类型 + DOM 移除时机三者叠加的结果。排查顺序建议：
- 先确认
<meta name="viewport">是否含initial-scale=1.0（绝大多数 H5 页面都有） - 再 grep 项目里所有
touchend和click监听器，看是否在同一操作链路中混用 - 最后检查弹层隐藏逻辑：是 CSS 切换（
visibility/opacity）、DOM 移除，还是display控制
最容易被忽略的是：跨页面跳转场景下，新页面对应位置的元素如果绑了 click，而跳转由 touchend 触发，同样会穿透——这时连原页面都找不到问题源头。
