导航栏点击穿透的根源是错误使用 pointer-events: none：父元素设为 none 会跳过整棵子树事件捕获，子元素 auto 无效；正确做法是用 display: none 彻底移除导航栏，或动画中合理控制 pointer-events。
导航栏本身不会导致点击穿透；真正出问题的是你加了 pointer-events: none 却指望子元素靠 pointer-events: auto 救回来——这根本行不通。
为什么给导航栏设 pointer-events: none 后按钮点不了
浏览器事件捕获是自顶向下的：只要父级（比如 .nav 或遮罩层）设了 pointer-events: none，整棵子树都会被跳过，不管子元素写没写 pointer-events: auto。这不是 bug，是规范行为，Chrome、Firefox、Safari 全部一致。
- 常见错误场景：弹窗蒙版加了
pointer-events: none，再给里面的关闭按钮加pointer-events: auto，结果按钮完全无响应 - 根本原因不是“没生效”，而是事件流压根没走到按钮那层
- 如果你真需要按钮可点，又不想蒙版本身拦截，就别把按钮放在蒙版 DOM 子树里
修复导航栏点击穿透的正确姿势
点击穿透在响应式导航栏中通常出现在「菜单收起后，点击区域仍触发底层按钮」——这往往是因为导航栏容器用了 visibility: hidden 或 opacity: 0，但没关掉事件响应能力。
- ✅ 推荐做法：用
display: none隐藏导航栏，它从渲染树中彻底移除，天然不参与任何事件 - ⚠️ 避免混合使用：
visibility: hidden+pointer-events: none看似保险，但visibility不影响事件捕获逻辑，pointer-events: none又容易误设在错误层级 - 若需淡出动画，改用
opacity+pointer-events: none组合，并确保 JS 在动画结束回调里才移除pointer-events: none（否则过渡期用户点不到）
移动端导航栏额外要注意的穿透陷阱
移动端的「点击穿透」常被混淆为两件事：一是 300ms click 延迟引发的误操作，二是真实事件穿透（比如蒙版消失后，下层按钮被连带触发）。前者跟 pointer-events 无关，后者才是你要调的。
- 不要在导航栏上滥用
pointer-events: none来“防穿透”——它解决不了 300ms 延迟，反而让本该响应的交互失效 - 如果导航栏里有
标签或button，确保它们没被包裹在pointer-events: none的父容器中 - 检查是否同时用了
touchstart和click监听器：重复绑定可能造成事件冒泡混乱，看起来像穿透
最常被忽略的一点：你改的 CSS 选择器可能根本没命中目标元素——比如写了 .nav .open（后代选择器），但 JS 是对 切换类名，实际需要的是 .nav.open（无空格）。类名匹配失败，样式不生效，pointer-events 就永远没机会起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
