pointer-events: none 会彻底禁用父元素及其所有后代的鼠标事件，子元素设 auto 也无效；正确做法是分层控制，如遮罩层设 none、按钮单独设 auto 并确保其不在被阻断的 DOM 路径中。
pointer-events: none 为什么没让子元素响应鼠标事件
直接给父容器设 pointer-events: none，本意是让点击“穿过”它落到下层元素，结果子元素也全失焦了——这不是穿透，是彻底禁用。根本原因是 pointer-events 具有继承性，且值为 none 时，该元素及其所有后代都会忽略鼠标事件，无论你有没有显式设置子元素的 pointer-events: auto。
解决办法只有两个方向：
- 避免在父级设
pointer-events: none，改用更精确的控制方式 - 如果必须用
none，就得把需要响应的子元素单独“拎出来”，用pointer-events: auto覆盖，但前提是这些子元素在 DOM 树中不被none父级完全包裹（例如它们是兄弟节点而非子节点）
如何让遮罩层透出点击，但保留内部按钮可点
典型场景：一个半透明 div.overlay 盖在内容上，想让它不拦截点击，但里面有个关闭按钮仍要可用。不能对整个 overlay 设 pointer-events: none，否则按钮也废了。
正确做法是分层处理：
立即学习“前端免费学习笔记（深入）”；
- 给遮罩层本身设
pointer-events: none - 给内部按钮设
pointer-events: auto（注意：按钮必须是遮罩层的直接子元素，且遮罩层不能有transform或opacity等触发新层叠上下文的属性干扰事件捕获路径） - 如果按钮是嵌套多层的（比如
.overlay > .panel > .close-btn），中间任意一层没设pointer-events: auto，事件就会在那层断掉
示例 CSS：
.overlay {
pointer-events: none;
}
.overlay .close-btn {
pointer-events: auto;
}
SVG 中的 pointer-events 行为和 HTML 不一样
SVG 元素默认对某些形状（如 <path>、<circle>）的 pointer-events 值是 visiblePainted，不是 auto。这意味着：如果 fill 或 stroke 是 none 或透明，哪怕图形存在，鼠标也点不到。
常见误判：
- 用
stroke: #000; stroke-width: 0;画线，以为“看不见就不用响应”，实际stroke-width: 0导致visiblePainted失效，点击无效 - 给
<g>设pointer-events: none，但组内某个<rect>单独设了auto，依然不生效——SVG 中<g>的none会强制阻断所有后代事件，无法被子元素覆盖
稳妥写法是直接控制具体可交互元素：
<circle cx="50" cy="50" r="20" pointer-events="auto"/> <path d="M10 10 L90 90" stroke="transparent" stroke-width="20" pointer-events="auto"/>
React/Vue 里动态切换 pointer-events 容易漏掉重置
用状态控制 pointer-events（比如 className={isDisabled ? 'disabled' : ''}）时，常忽略样式优先级和过渡残留。例如：
- CSS 中写了
.disabled { pointer-events: none !important; }，后续 JS 想通过内联 style 覆盖（style={{ pointerEvents: 'auto' }}）会失败，因为 !important 权重更高 - 动画过程中（如 fade-out），DOM 还在，但 opacity 为 0，此时若没同步关掉
pointer-events，用户仍可能误点到不可见元素 - 组件卸载前没清理绑定在该元素上的事件监听器，而该元素因
pointer-events: none暂时“静默”，容易掩盖内存泄漏问题
建议统一用 className 控制，且确保启用/禁用规则成对出现，不要混用 style 和 class。
真正难的不是写 pointer-events: none，而是判断哪一层该设、哪一层必须显式恢复、以及 SVG 和 HTML 在事件冒泡路径上的隐含差异。浏览器不会报错，但点击失效时排查链路往往跨 CSS、DOM 结构、甚至渲染层。
