button:disabled 默认显示手型光标是因为浏览器不自动设置 cursor: not-allowed；需显式声明，且优先使用原生 disabled 属性而非 pointer-events: none 以保障无障碍。
button:disabled 为什么点击还有手型光标
因为 :disabled 伪类只禁用表单控件的交互逻辑（如提交、聚焦），但默认不修改 cursor 样式。浏览器不会自动把禁用按钮的光标设为 not-allowed，这是常见误解。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
cursor: not-allowed，且要写在:disabled规则里，不能只靠父容器或通用重置 - 如果用了
pointer-events: none替代:disabled，注意它会彻底阻止所有事件（包括focus和键盘操作），不符合无障碍要求 - 某些旧版 Safari 对
button:disabled的cursor支持不稳定，加!important更稳妥（仅限此场景）
如何让 disabled 按钮真正“不可点”且视觉一致
单纯加 disabled 属性后，按钮仍可能响应 click 事件（尤其在 React 等框架中误绑了事件监听器），或因 CSS 覆盖导致样式未灰化。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保 HTML 中真实存在
disabled属性：<button disabled></button>，而不是仅靠 JS 控制disabled属性值为false - CSS 中同时处理三件事：灰化颜色（
opacity或color）、禁用光标（cursor: not-allowed）、禁用指针事件（pointer-events: none—— 注意：仅当不需要键盘焦点时才加） - 避免用
opacity: 0.5单独模拟禁用态，它不影响交互行为，只是视觉欺骗
:disabled 与 pointer-events: none 的关键区别
两者都能让按钮“点不动”，但语义和行为完全不同：:disabled 是语义化状态，支持表单提交逻辑、键盘导航（Tab 可跳过）、屏幕阅读器识别；pointer-events: none 是纯视觉/交互屏蔽，对辅助技术不友好，且会阻止 focus 和 blur。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用原生
disabled属性 +:disabledCSS，这是标准做法 - 只有在非表单元素（如
<div role="button">）上模拟禁用态时，才考虑 <code>pointer-events: none，并手动加aria-disabled="true" - 不要混用：
button[disabled] { pointer-events: none; }是冗余的，且可能干扰某些浏览器的 focus 管理 - 检查渲染后的 DOM，确认最终
<button></button>元素上是否存在disabled属性，而不是只看组件 props - 避免在 JSX/Template 中写
disabled={isLoading ? true : false}，直接写disabled={isLoading}，否则 falsy 值（如undefined）会导致属性被忽略 - 自定义组件务必用
...restProps或v-bind="$attrs"把原生属性透传下去，否则:disabled规则无效
React/Vue 中 disabled 状态失效的典型原因
框架组件常封装了原生 button，但没把 disabled 属性透传到底层，或者用 class 切换模拟禁用态，导致 :disabled 伪类完全不匹配。
实操建议：
立即学习“前端免费学习笔记（深入）”；
disabled 属性，这些就全断了。
