点击穿透本质是事件时机错位：移动端为支持双击缩放，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-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 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 触发，同样会穿透——这时连原页面都找不到问题源头。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！