因为父级设 pointer-events: none 会自顶向下跳过整棵子树的命中检测，子元素设 auto 完全无效；必须作用于真正遮挡的元素本身，或将其抽离为兄弟节点、用伪元素模拟遮罩。
pointer-events: none 为什么不能加在父容器上？
因为浏览器事件命中检测是自顶向下进行的，只要某个祖先元素（包括遮罩自身）设了 pointer-events: none，整棵 DOM 子树都会被跳过——子元素写 pointer-events: auto 完全无效。
典型错误结构：<div class="overlay" style="pointer-events:none"><button class="close">×</button></div>，哪怕按钮加了 pointer-events: auto，点击依然没反应。
- 必须作用于真正遮挡的元素本身，比如遮罩层是
.mask，就直接给它设pointer-events: none - 如果关闭按钮在遮罩内部，正确做法是把它抽离为兄弟节点：
<div class="mask"></div> <button class="close">×</button>，再用z-index和定位控制层级 - 或者改用伪元素模拟遮罩背景：
.mask::before设pointer-events: none，真实按钮作为主元素保留默认行为
怎么让遮罩整体穿透、但右上角 × 按钮可点？
不能靠父子关系“修复”，得换结构或分区域控制。局部启用交互的关键不是“覆盖继承”，而是避免事件在祖先层就被截断。
- 遮罩本身设
pointer-events: none - 关闭按钮必须是遮罩的**同级兄弟元素**，或用 React Portal 渲染到
下 - 若坚持嵌套结构，可用
position: absolute+ 更高z-index把按钮“浮”在遮罩上方，但确保它不在遮罩的 DOM 子树中 - 别用
opacity: 0或visibility: hidden替代——它们不阻止事件，只是视觉隐藏
编辑器/富文本场景下 pointer-events 失效的常见原因
编辑器 DOM 层级深，pointer-events: none 加错一层就会导致整个工具栏或内容区失活，且无法靠子元素 auto 补救。
- 浮动工具栏需每个按钮都是工具栏的**直接子元素**，中间不能有未设
pointer-events: auto的包裹层 - 实时协作光标、水印等装饰性图层，优先用伪元素
::before/::after实现，并对其单独设pointer-events: none - iOS Safari ≤15.3 中，若穿透层下方压着
<input>或<textarea></textarea>，软键盘可能不弹出——此时应避免在编辑器根容器设none，只对非表单区域的装饰层设 - 动画过渡中，
pointer-events: none必须与 opacity 动画同步：动画开始前设，结束后立刻移除，否则中间帧仍可点
SVG 元素里 pointer-events 的特殊规则
SVG 中 pointer-events 的值更细粒度，但 HTML 元素上只有 auto 和 none 真正生效；其他如 visiblePainted、fill 等只在 SVG 内部起作用。
-
<g></g>设pointer-events: none会强制阻断所有后代事件，子元素设auto也无效 - 稳妥做法是直接控制具体可交互元素，比如给某个
<path></path>单独设pointer-events: auto - 用
stroke-width: 0画线时，visiblePainted会失效——因为没有实际绘制区域，点击无响应 - SVG 默认可交互，但内部元素常被重置，须显式设回
pointer-events: visiblePainted或auto
pointer-events 不为 none 的元素是谁。这点容易被忽略，尤其在多层绝对定位叠加时。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
