pointer-events: none仅禁用鼠标/触控事件，不阻止键盘操作、表单提交或屏幕阅读器识别；回车/空格仍可触发按钮因浏览器将键盘视为原生激活行为，该css属性对键盘事件完全无效。
pointer-events: none 是禁用元素点击最直接的 CSS 方案，但它只拦截鼠标和触控事件，不阻止键盘操作、表单提交或屏幕阅读器语义——别把它当 disabled 用。
为什么 pointer-events: none 点了没反应，但回车/空格还能触发？
因为该属性仅禁用“指针事件”（click、hover、contextmenu 等），对键盘事件完全无感。浏览器仍会把 Enter 或 Space 当作按钮的原生激活行为处理。
- 若按钮绑了
onclick，键盘触发时 JS 仍会执行——pointer-events不影响事件监听器本身 - 表单中该按钮的
value仍会被序列化提交，除非你同时设了disabled - 想真正禁用所有交互？得配合
tabindex="-1"+ 移除disabled属性逻辑，或直接上disabled
子元素需要响应点击时怎么恢复？
父元素设了 pointer-events: none，子元素默认继承，必须显式覆盖：
- 给子元素加
pointer-events: auto（如图标、文字、内部按钮） - 注意：IE10 及更早版本不支持继承覆盖，需避免在兼容旧 IE 场景中依赖此写法
- 若子元素是
<i class="icon"></i>，单独写.icon { pointer-events: auto; }即可 - 不要只靠 CSS 恢复——如果父容器是临时遮罩，JS 里也应同步控制子元素的可访问性状态（如
aria-disabled）
哪些元素不该用 pointer-events: none 替代 disabled？
input、textarea、select、button 这类语义化表单控件，优先走原生 disabled 属性：
-
select上设pointer-events: none无效——下拉箭头仍可点击 -
disabled会自动排除表单数据、禁用键盘焦点、触发浏览器默认禁用样式；pointer-events什么都不会自动做 - 权限类禁用（如用户无操作资格）必须后端校验，CSS 层面的禁用纯属视觉提示，毫无安全性可言
- React/Vue 中动态切换时，光切 class 不够，记得同步更新组件的
disabledprop 或 DOM 属性
最常被忽略的点：它让鼠标“穿透”元素，点击会落到下方 DOM 节点上——不是按 z-index，而是按渲染顺序找第一个 pointer-events: auto 的元素。遮罩层、弹窗、图标叠加场景里，这点极易引发误操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
