点击穿透本质是click事件落到了因HTML非法嵌套而被浏览器移位的孤立元素上，根源在DOM结构破坏而非JS逻辑；需用W3C Validator定位嵌套错误，并通过remove()或inert彻底移除目标元素。
点击穿透不是 click 事件没触发，而是它落到了不该在那里的元素上
你看到“点击没反应”，其实 click 已经发生——只是被上层某个本不该存在的 <a> 或 <button> 拦截了。根源常不在 JS 绑定逻辑，而在 HTML 嵌套本身破坏了 DOM 层级预期。比如 <p><a href="#">文字</a></p> 看似合理，但如果这个 <p> 被非法嵌套在 <ul> 里，浏览器会把它“踢出”列表，导致 <a> 实际脱离语义容器、悬浮在 DOM 树外层，z-index 和事件捕获链全乱套。
- 用
document.querySelectorAll('a')查所有链接，再逐个检查el.parentElement是否为null或指向意外父级 - 特别盯住
<ul>/<ol>/<table>内部的<a>：它们必须直接包在<li>或<td>里，否则会被浏览器挪走 - 执行
getComputedStyle(el).position看是否为static；若非 static 却没设z-index，它可能被后续同级元素覆盖（哪怕视觉上没重叠）
嵌套错误让 <a> 变成“幽灵链接”
HTML 规范禁止 <a> 直接作为 <p> 的子元素吗？不禁止。但它禁止 <p> 出现在 <ul> 里——而一旦你写了 <ul><p><a>...，浏览器就会先闭合 <ul>，再把 <p> 和里面的 <a> 插到 <ul> 外面。结果就是：DOM 中出现一个孤立的 <a>，它没有父级上下文，body > a 能选中它，但 .list-item > a 永远找不到。
- 打开 Chrome DevTools → Elements 面板，搜索
<a，观察每个<a>的缩进层级是否突兀跳变 - 右键任一
<a>→ “Edit as HTML”，敲空格回车：如果整个节点位置移动，说明原始嵌套已被修正过 - 运行
document.querySelectorAll('a').forEach(a => { if (!a.closest('ul, ol, table')) console.warn('a outside semantic container:', a) })
移动端 touchend + display:none 不等于点击穿透消失
很多人以为只要给弹窗加 touchend 并隐藏，穿透就解决了。错。如果那个 <a> 因嵌套错误被浏览器“踢”到了 <body> 底层，而你又没清理它的 pointer-events 或移除绑定，300ms 后的 click 依然会命中它——而且这次是直接落在 body 上，连冒泡都省了。
- 不要只靠
display: none：它不移除元素，只隐藏渲染；用remove()或aria-hidden="true"+inert更彻底 - 监听
touchend时，同步调用aElement.blur()，防止焦点残留干扰事件流 - 对所有可能被穿透的目标
<a>，提前加data-no-penetration属性，并在 touchend 后统一处理：document.querySelectorAll('a[data-no-penetration]').forEach(a => a.style.pointerEvents = 'none')，350ms 后再恢复
W3C Validator 是唯一能定位嵌套源头的工具
DevTools 显示的是“修复后”的 DOM，它告诉你结构现在什么样，但不告诉你哪一行 HTML 写错了。只有 W3C Validator（validator.w3.org）会按规范逐字符校验内容模型，比如报错 Element a not allowed as child of element p in this context，你就知道问题不在 <a> 本身，而在它外面那个 <p> 放错了地方。
立即学习“前端免费学习笔记（深入）”；
- 复制出问题区域的 HTML 片段（含外层 2~3 层父级），粘贴到 validator.w3.org → “Validate by Input”
- 优先修复第一条
Error，别管Warning；很多 Warning 是 Error 导致的连锁反应 - 注意
Element img is not closed这类提示：写成<img></img>会让后续所有嵌套失效，<a>就可能被塞进错误的父级里
<a> 的位置、父级、事件流全部失控。最危险的不是它不工作，而是它“看起来正常”，直到某次 DOM 变更或浏览器版本升级才突然暴露。 
