pointer-events: none仅禁用指针事件（click、hover等），不拦截键盘事件（enter/space仍可触发onclick）、不影响表单提交、不阻止焦点获取和屏幕阅读器识别，且父元素设none时子元素设auto无效。
直接写 pointer-events: none 就能禁用鼠标点击，但它不拦键盘、不改表单行为、也不阻止事件冒泡到父级——别把它当 disabled 用。
为什么加了 pointer-events: none 还能按回车触发？
因为该属性只屏蔽“指针事件”（click、mousedown、hover 等），对键盘事件完全无感。浏览器仍把 Enter 或 Space 当作按钮原生激活行为处理，onclick 监听器照常执行，表单 value 也照常提交。
- 想真正禁用所有交互，必须同步设置
disabled属性（对button/input等语义化控件）或tabindex="-1"+aria-disabled="true"（对div模拟按钮） -
pointer-events: none不影响焦点流，Tab仍可聚焦该元素 - 它也不影响屏幕阅读器识别，语义和可访问性需额外补全
子元素还能点吗？怎么恢复？
不能。一旦父元素设了 pointer-events: none，整个子树在事件捕获阶段就被跳过——即使你给子元素显式写 pointer-events: auto，它也收不到任何鼠标事件。这是 CSS 规范明确规定的。
- 遮罩层里要放关闭按钮？别套父子结构硬刚
auto，把按钮提到遮罩同级，用z-index控制层叠 - 图标或文字需要 hover 效果？说明你压根不该在容器上设
none，换用cursor: not-allowed+ JS 拦截click更合适 - IE11 及更早版本对
button、input上的pointer-events: none支持不稳定，慎用于兼容场景
点击穿透后到底点到了谁？
不是按 z-index 找，而是按 DOM 渲染顺序，从上往下找第一个 pointer-events: auto 的元素。如果遮罩层设了 none，用户可能意外点中背后被盖住的按钮、链接甚至输入框。
- 遮罩层本身必须是定位元素（
position: fixed/absolute），否则可能没真盖住目标 - 伪元素（如
::before）也要单独设pointer-events: none，否则它会独立捕获事件 - 移动端尤其危险：iOS Safari 15.4 前不支持与
touch-action协同；安卓部分 WebView 对嵌套多层none支持差，建议扁平化 DOM
动画中切换 pointer-events 容易漏什么？
过渡中间帧若仍为 auto，用户就可能点中半透明状态下的元素。视觉已淡出，但事件还开着。
- 动画开始前立即设
pointer-events: none，结束回调里再切回auto（或移除） - 避免和
visibility: hidden混用——它不影响事件流，加了白加；display: none虽天然禁用交互，但无法做 CSS 动画 - React/Vue 中用 class 切换时，别忘了清理残留事件监听器，否则可能误判目标
最常被忽略的点：它让鼠标“穿透”，但穿透逻辑不看视觉层级，只看 DOM 顺序和 pointer-events 状态。遮罩、弹窗、图标叠加这类场景，稍不注意就点错、点漏、点穿底层关键操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
