pointer-events: none仅禁用鼠标/触控事件，不阻止键盘操作、表单提交或屏幕阅读器识别；回车/空格仍可触发按钮，因浏览器将键盘视为原生激活行为，该CSS属性对键盘事件完全无效。
直接加 pointer-events: none 就能禁用鼠标点击，但它只拦鼠标和触控，不拦键盘、不拦表单提交、不拦屏幕阅读器——别当 disabled 用。
为什么按钮加了 pointer-events: none 还能按回车触发？
因为该属性只跳过“指针事件”（click、mousedown、hover 等），浏览器仍把 Enter 或 Space 当作按钮的原生激活行为处理。只要没设 disabled，onclick 监听器照样执行，表单 value 也照常提交。
- 想真正禁用所有交互：必须同步加
disabled属性（对button/input等有效） - 若只能用 CSS（比如要保留
value提交），就得额外加tabindex="-1"和aria-disabled="true"来补可访问性 - 纯视觉禁用（如加载中按钮）可用它，但别指望它替代语义逻辑
子元素需要响应点击时，pointer-events: auto 为什么有时不生效？
父元素设了 pointer-events: none，子元素写 pointer-events: auto 在绝大多数现代浏览器里是有效的——但有硬限制：
- 仅适用于非表单容器（如
div包着一个button）；若父是button自身，子元素（如图标i）无法“抢回”事件捕获权 - IE10 及更早版本完全不支持继承覆盖，旧项目慎用
- 伪元素（如
::before）需单独设pointer-events: none，否则它会独立拦截事件 - 移动端某些 WebView（尤其华为/小米定制内核）对嵌套多层
none → auto支持不稳定，建议扁平化结构
遮罩层下按钮被意外点中，是不是 z-index 没设对？
不是。点击穿透行为跟 z-index 无关，而是按 DOM 渲染顺序找第一个 pointer-events: auto 的元素。遮罩层设了 none，点击就会落到它下方最近的、未被 none 拦截的元素上——哪怕那个元素在视觉上被盖住了。
- 确认遮罩层本身是否真的定位（
position: absolute/fixed），否则可能根本没盖住目标 - 避免在遮罩层内部放
input或select，iOS Safari 旧版可能不弹软键盘 - 关闭按钮必须移出遮罩 DOM 树（例如用 Portal 渲染到
下），不能靠“父none+ 子auto”硬救 - 滚动穿透问题不在遮罩层，而在它下方的可滚动容器（如
.page-content），需动态加pointer-events: none
动画中切换 pointer-events 容易漏掉什么？
用 opacity 做淡入淡出时，如果只在动画开始前和结束后切 pointer-events，中间过渡帧仍是 auto，用户就可能点中半透明状态下的元素。
- 动画启动瞬间立即设
pointer-events: none，结束回调里再切回auto（或移除） - 别和
visibility: hidden混用——它不影响事件流，加了等于白加 -
display: none虽天然禁用交互，但无法做 CSS 动画，需 JS 配合控制显示时机 - React/Vue 中用 class 切换时，注意清理副作用（比如残留的
document.addEventListener('click', ...)）
最常被忽略的是穿透行为本身：它让鼠标“穿过”元素去找下一个可点目标，而不是按视觉层级（z-index）判断。遮罩、图标叠加、弹窗关闭按钮这些场景，一旦没理清 DOM 顺序和 pointer-events 的实际作用对象，点错、点不中、关不了弹窗都是常态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
