父元素设pointer-events: none会使子元素pointer-events: auto失效，因事件捕获阶段直接跳过整棵子树；验证需查computed值并逐级向上定位；恢复交互应抽离控件为兄弟节点或用伪元素模拟遮罩。
子元素设了pointer-events: auto为什么还是点不了
不能。父元素一旦设了pointer-events: none，浏览器在事件捕获阶段就跳过整棵子树，子元素写pointer-events: auto完全无效——这不是样式没生效，而是事件根本没走到它那层。
常见错误场景：
- 把关闭按钮放在
<div class="overlay" style="pointer-events:none"><button class="close"></button></div>里，再给.close加pointer-events: auto - 用
::before伪元素画遮罩，却想靠.close-btn { pointer-events: auto }恢复交互——伪元素无法包含真实 DOM 子节点 - SVG 内部的
<g></g>设了pointer-events: none，再给子<path></path>设auto，同样无效
怎么验证是不是被祖先元素继承了pointer-events: none
快速定位问题根源：打开开发者工具，选中目标可点击元素（比如按钮），在 “Computed” 面板搜索 pointer-events。如果值显示为 none（哪怕带删除线），说明它被某个祖先强制覆盖了。
更准的验证方式是直接运行：
getComputedStyle(document.querySelector('.your-btn')).pointerEvents
返回 "none" 就确认被继承或重写了。接着往上逐级检查父元素的 computed 值，直到找到第一个设了 pointer-events: none 的节点。
真正能局部恢复交互的两种做法
想让遮罩整体透传、但某块区域（如右上角 ×）仍可点，不能靠父子结构“修复”，得换思路：
- 把需要交互的控件抽离为遮罩的兄弟节点：
<div class="overlay"></div> <button class="close-btn"></button>，再用position: absolute+z-index叠上去 - 用伪元素模拟遮罩：
.overlay::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); pointer-events: none; }，真实按钮作为主元素保留默认行为
移动端和表单控件的特殊限制
pointer-events: none在移动端对touchstart/touchend有效，但旧版 Safari（15.4 之前）不支持与touch-action协同；更关键的是：<input>、<select></select>这类表单控件本身不响应子元素的pointer-events: auto恢复——即使你把它包在pointer-events: none容器里，再设子input为auto，焦点依然无法触发。
这种情况下必须移出结构，比如把input渲染到下，或改用label + for关联外部触发。
最易被忽略的一点：z-index 再高，只要没设pointer-events: none，照样拦截点击；z-index 再低，只要没被其他元素挡住且未设none，也能响应——事件流和绘制流是两套逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
