加 pointer-events: none 必须作用于被穿透的遮挡元素本身，而非父容器或兄弟元素；若失效，常见原因是加错位置、未设定位导致层叠异常、IE11 对表单元素兼容性差，或需保留 hover/focus 等交互时误用。
直接用 pointer-events: none 就行，但必须加在“被穿透”的那个元素上，不是父容器也不是兄弟元素。
为什么加了 pointer-events: none 还点不透？
大概率是加错位置了。这个属性只对当前元素生效，且子元素无法靠 pointer-events: auto 挽回——一旦父级设为 none，整棵子树都会被跳过，浏览器在事件捕获阶段就绕开了它。
- 检查是否误加在父容器上，而真正遮挡的子元素（比如水印、蒙层、装饰图）没加
- 确认目标元素有定位（
position: absolute/fixed/relative），否则可能被层叠上下文干扰，视觉上盖不住但事件没走它那条路径 - IE11 对
button、input等表单元素的支持不稳定，哪怕写了none仍可能响应点击，尤其在 iframe 内
什么时候不能只靠 pointer-events: none？
它禁的是所有指针事件，包括 hover、focus、contextmenu，如果你只想禁 click 但保留悬停样式或键盘可访问性，这条路就走歪了。
- 需要
:hover效果？改用cursor: not-allowed+ JS 拦截click事件 - 要让屏幕阅读器和键盘用户知道它已禁用？必须同步加
aria-disabled="true"和tabIndex="-1"（button元素优先用原生disabled） - 想让遮罩下某个按钮还能点？别把它塞进遮罩内部，改成同级兄弟元素，靠
z-index控制层叠顺序
pointer-events: none 和 display: none、visibility: hidden 的关键区别
三者都“看不见”或“不响应”，但机制完全不同：
立即学习“前端免费学习笔记（深入）”；
-
display: none：元素彻底脱离文档流，不占位、不渲染、不触发任何事件，但会引发重排（reflow） -
visibility: hidden：元素还在流中占位，只是不可见，仍响应鼠标事件，所以一定得配pointer-events: none -
opacity: 0：视觉透明，但默认仍可点可 hover，同样必须加pointer-events: none才真正“虚化”
动画场景下，opacity 支持硬件加速，visibility 不支持过渡，display 根本不能做 CSS 动画——所以多数显隐动效选 opacity + pointer-events: none 是更实际的组合。
React/Vue 中动态控制的推荐写法
别用内联 style 直接写 pointerEvents，容易漏分支、难调试、和 CSS 动画冲突。
- 写一个 class：
.is-overlay { pointer-events: none; } - React：
className={`card ${isOverlay ? 'is-overlay' : ''}`} - Vue：
:class="{ 'is-overlay': isOverlay }" - 如果同时要控制显隐，把
visibility: hidden或opacity: 0也收进这个 class 里，保持语义统一
最常被忽略的一点：pointer-events: none 不影响 DOM 结构、不改变语义、也不管你有没有加 tabIndex 或 aria 属性——交互状态的 JS 逻辑、可访问性标记、CSS 样式三者必须同步更新，否则键盘用户或屏幕阅读器会陷入“看得见、点不了、又不知道为啥”的境地。
