pointer-events: none 是解决视觉与交互错位的底层机制，使遮罩层点击穿透到底层元素，保留视觉效果但仅屏蔽指针事件，不影响键盘操作与表单行为。
它不是用来“禁用按钮”的，而是解决“看得见、点不着”这类视觉与交互错位问题的底层机制。
让遮罩层点击穿透到底层元素
当一个 .overlay 或 .loading-mask 覆盖在按钮、链接或图表上时，设 pointer-events: none 可使鼠标/触控事件直接透传到下层可交互元素，同时保留遮罩的视觉效果（透明度、动画、定位等）。
- 必须作用于遮挡元素本身，而非父容器或兄弟节点
- 若遮罩内含关闭按钮等需响应区域，得给该子元素显式加
pointer-events: auto - 别指望
z-index或opacity能绕过事件拦截——它们无效 - 真机必测：iOS Safari 对
input下方设none的穿透支持不稳定，部分机型软键盘不弹
禁用交互但保留视觉样式和键盘焦点
比如加载中按钮需保持高亮色、不灰掉，又不能被点击：pointer-events: none 配合 cursor: not-allowed 和自定义 opacity 就能实现；但它不阻止 Tab 键聚焦、回车触发、表单提交。
- 它只屏蔽指针事件（
click、hover、contextmenu），对键盘事件完全无感 - 若按钮绑了
onclick，空格/Enter 仍会执行 JS，且value仍参与表单序列化 - 真正语义化禁用，请用原生
disabled属性；pointer-events: none是视觉+交互分离时的折中方案
避免伪元素或装饰层意外拦截点击
像用 ::before 绘制的高亮边框、拖拽手柄、SVG 图例浮层，常因层级过高而挡住真实目标。给这些装饰性元素单独设 pointer-events: none 即可解除干扰。
- 伪元素（
::before/::after）默认有独立事件捕获能力，需单独设置 - 设了
none后，其子元素无法靠auto恢复——浏览器在命中测试阶段就跳过了整棵子树 - 穿透路径由渲染顺序决定，不是 DOM 顺序；用 Chrome DevTools 的 “Hit test borders” 可验证实际覆盖链
最容易被忽略的是：DOM 中那个“真正盖住目标”的元素，可能不是你直觉认为的那个——它可能来自某个 transform 创建的新层叠上下文，或被 opacity: 0.99 意外触发的 stacking context 所隔离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
