pointer-events: none 是最轻量可靠的点击失效方案，仅拦截鼠标/触控事件，不影响表单提交、键盘焦点及 enter/space 触发，但子元素需手动设 auto，且不替代语义化 disabled。
button 点击失效但样式还在，用 pointer-events: none 最直接
想让按钮看起来没变，但点不动，pointer-events: none 是最轻量、最可靠的方案。它不干扰 DOM 结构、不改 disabled 状态、也不影响表单提交逻辑——只拦截鼠标/触控事件。注意：它对键盘焦点和 Enter / Space 触发点击无效，这点常被忽略。
pointer-events: none 和 disabled 的关键区别
两者视觉上都可能让按钮“变灰”，但行为完全不同：
-
disabled会禁用所有交互（包括键盘），且按钮值不会随表单提交；pointer-events: none不影响表单提交，也不阻止tab进入或Enter触发click -
disabled是 HTML 属性，会触发浏览器默认禁用样式；pointer-events: none是纯 CSS，样式完全由你控制 - 子元素也会继承
pointer-events: none，如果按钮里有图标或文字需单独设pointer-events: auto
实际写法与常见踩坑
直接加在按钮上即可，但要注意继承和覆盖问题：
- 推荐写法：
button[disabled], .btn--disabled { pointer-events: none; cursor: not-allowed; }（同时配cursor提示用户） - 如果按钮内含
<i class="icon"></i>，而你想保留图标的 hover 效果，得单独加：.icon { pointer-events: auto; } - 在 Safari 旧版本（≤12）中，
pointer-events: none对<button></button>的某些伪类（如:active）支持不稳定，建议测试 - 不要只靠它做权限控制——它纯属 UI 层遮罩，后端仍需校验操作合法性
什么时候不该用 pointer-events: none
如果你需要真正语义化的“不可用”状态，比如表单验证未通过时阻止提交，优先用原生 disabled 属性。用 pointer-events 临时屏蔽，往往是因为：
- 要保持按钮的
value参与表单序列化 - 正在做加载态切换，但不想触发
disabled的样式重绘（比如 Ant Design 的loading按钮就是靠它 + 自定义 class 实现） - 需要精细控制某一层级（如遮罩层盖住按钮但允许穿透点击底层）
真要彻底禁用交互，别只信 CSS —— 键盘可访问性那块最容易漏掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
