pointer-events: none 仅禁用指针事件且需作用于真正覆盖目标的定位元素，伪元素需单独设置，不替代 disabled，遮罩内按钮须移出 DOM 或分区控制。
pointer-events: none 能禁用鼠标点击并让事件穿透到下层元素，但它不是“禁用点击”的万能开关——它只管指针事件，不管键盘、表单提交或可访问性。
为什么加了 pointer-events: none 还点不透？
最常见原因是加错了 DOM 节点：
- 必须作用于「真正盖住目标」的那个元素本身，比如遮罩层
.mask，而不是它的父容器或兄弟节点 - 检查该元素是否有
position: absolute或fixed—— 没定位的元素可能视觉上没真盖住底层，事件根本不会走到它那里 - 伪元素（如
::before）默认参与事件流，得单独加pointer-events: none，否则它会独立吃掉点击 - 安卓某些 WebView 对嵌套多层
none支持不稳定，建议 DOM 结构扁平化
pointer-events: none 和 disabled 到底该用哪个？
对 <button>、<input>、<select> 等语义化表单控件，优先用原生 disabled 属性：
-
disabled会自动排除表单数据提交、禁用键盘焦点、触发浏览器默认禁用样式 -
pointer-events: none什么都不会自动做：回车/空格仍可触发按钮、value仍会被序列化、屏幕阅读器照常识别 - 在
<select>上设pointer-events: none无效——下拉箭头依然可点 - React/Vue 中动态切换时，光切 class 不够，必须同步更新组件的
disabledprop 或 DOMdisabled属性
遮罩层里有关闭按钮，怎么让它可点？
别信“父设 none + 子设 auto”能救回来——浏览器在事件捕获阶段就跳过整棵子树，pointer-events: auto 在父级为 none 时完全无效：
立即学习“前端免费学习笔记（深入）”；
- 把关闭按钮移出遮罩 DOM 树，例如用 Portal 渲染到
<body>下，再靠z-index控制层级 - 或者只对遮罩的「非按钮区域」设
pointer-events: none，按钮所在区域保持auto - 避免在遮罩内部放
<input>或<select>—— 它们无法被子元素恢复 focus，iOS 旧版甚至不弹软键盘
最容易被忽略的一点：pointer-events: none 让点击“穿透”，但落点不是按 z-index 找，而是按渲染树绘制顺序，找第一个 pointer-events: auto 的元素——遮罩、弹窗、图标叠加场景里，这点极易引发误操作，真机测试不能省。
