pointer-events: none 会跳过整棵子树的命中测试，子元素设 auto 也无效；仅 SVG 支持 visiblePainted 等值，HTML 中无效；不影响键盘交互，需单独处理焦点与可访问性。
pointer-events: none 为什么子元素设 auto 也没用
因为 pointer-events: none 不是“让这个元素不响应”，而是“在命中测试（hit-testing）阶段就跳过整棵子树”。浏览器渲染树自顶向下检测事件目标，父级为 none 时，压根不会检查其任何后代是否设置了 auto —— 这不是 bug，是 CSS 规范明确行为。
常见误判场景：
- 给弹窗蒙版
.mask { pointer-events: none; }，再给里面关闭按钮加.close-btn { pointer-events: auto; }→ 按钮完全点不了 - SVG 中给
<g>设none，再给内部<circle>单独设auto→ 依然无效
真正生效的前提是：可点击元素不能被 none 父级包裹在 DOM 路径中。要么把按钮提成兄弟节点，要么用 Portal 渲染到 body 下。
HTML 场景下只该用 auto 和 none
visiblePainted、fill、stroke 等值仅对 SVG 有效，在普通 HTML 元素上设置会被忽略，DevTools 里看到 computed 值仍是 auto 或继承值，但行为不会变。
立即学习“前端免费学习笔记（深入）”；
日常开发中只需记住：
-
auto：默认，正常参与事件流 -
none：彻底退出鼠标事件流，:hover、:active全失效，JS 的addEventListener('click', ...)根本不会触发 -
inherit和unset容易引发嵌套误判，除非你明确控制了整条路径的计算值，否则慎用
注意：pointer-events: none 不影响键盘交互——表单控件仍可聚焦、提交、读取 value，它只管“鼠标点不点得中”。
遮罩层透传点击 + 内部按钮可用的正确写法
核心思路：不让按钮落在被 none 阻断的 DOM 子树里。
可行方案：
- 结构上拆分：遮罩层和按钮是同级元素，都绝对定位，按钮 z-index 更高，且自身设
pointer-events: auto - CSS 分层控制：遮罩层设
pointer-events: none，但按钮用position: fixed或脱离原容器流，避免被其包裹 - JS 辅助：监听遮罩层父容器的点击事件，通过
event.target判断是否点中按钮区域，手动触发逻辑（绕过 CSS 限制）
错误示范：.overlay { pointer-events: none; } .overlay .btn { pointer-events: auto; } —— 只要 .btn 是 .overlay 的后代，就无效。
调试时怎么看 pointer-events 是否生效
别只看 Styles 面板里写的值，重点查 computed style：
- 打开 DevTools → Elements → 选中目标元素
- 在 Styles 面板右侧切换到 Computed → 搜索
pointer-events - 确认显示的是
none（而非inherit、initial或被其他规则 override）
如果 computed 是 none 但点击仍有反应，大概率是事件委托在父级捕获了（比如 document.addEventListener('click', ...)），pointer-events 并不影响事件冒泡路径，只影响初始目标判定。
最易被忽略的一点：它不处理键盘焦点逻辑，tabindex、focus()、aria-disabled 都得单独配，否则可访问性会断裂。
