按钮禁用失效主因是误用非表单元素或状态未同步；CSS cursor不生效多因优先级冲突；需结合pointer-events、aria-disabled及视觉反馈确保功能与无障碍兼容。
按钮点击后禁用但样式没变？disabled 属性没生效
直接写 disabled 属性却没反应，大概率是用了自定义按钮（比如 <div> 或 <span>），而 disabled 只对原生可交互表单元素（<button>、<input>、<select>）起作用。React/Vue 里还可能因状态更新异步或未触发重渲染导致 DOM 没同步。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保用的是
<button>标签，不是<div onclick>类伪按钮 - React 中检查是否用了
useState正确更新disabled值，且没在事件回调里漏掉event.preventDefault()导致重复提交 - Vue 中若用
v-bind:disabled，确认绑定的是响应式数据，非字面量布尔值 - 禁用后记得加 CSS 规则：
button:disabled { cursor: not-allowed; opacity: 0.6; }，否则视觉上毫无反馈
cursor: not-allowed 不生效？优先级或选择器错了
CSS 的 cursor 不生效，90% 是被更高优先级规则覆盖，比如全局 button { cursor: pointer; } 直接压过了 button:disabled 的声明。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查计算样式，看
cursor是否被划掉（strikethrough） - 把选择器写得更具体：用
button[disabled]或button:disabled，避免依赖伪类顺序 - 别在
:hover规则里设cursor，它会干扰:disabled的生效逻辑 - 如果按钮内有子元素（如图标
<i>），它们可能继承父级cursor，需额外重置：button[disabled] * { cursor: not-allowed !important; }
禁用状态要保留点击效果？别直接删 click 事件
有些场景需要按钮禁用时仍能响应点击（比如展示提示“请稍候”），但又不想用户误操作。这时候硬加 disabled 就断了所有交互，反而坏事。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不设
disabled，改用状态控制行为：if (isSubmitting) return;在事件处理函数开头拦截 - 配合 CSS 手动模拟禁用态：
button.is-pending { pointer-events: none; cursor: not-allowed; } - 注意
pointer-events: none会让子元素也失效，若按钮内有 tooltip 或 popover，得单独给子元素加pointer-events: auto - 这种方案比
disabled更灵活，但得自己管状态同步和无障碍支持（比如加aria-disabled="true"）
移动端点击禁用按钮还有延迟？disabled 不防 touchstart
iOS Safari 和部分安卓 WebView 下，即使按钮已 disabled，touchstart 仍可能触发，尤其快速连点时——这是浏览器对触摸事件的特殊处理，disabled 只阻断默认行为，不拦底层事件流。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用后立刻加一层事件监听器拦截：
button.addEventListener('touchstart', e => e.preventDefault(), { passive: false }); - 更稳妥的做法是禁用时同时移除事件监听器，或用标志位在 handler 开头判断
if (!canClick) return; - 别依赖
disabled做防抖，它不是防重复点击的替代品；真正要防重提交，还得结合请求状态 + loading 标志
禁用状态看着简单，但涉及语义 HTML、CSS 层叠、事件生命周期、移动端兼容性，每个环节都容易漏掉一两个细节。最常被忽略的是：禁用 ≠ 防点击，也不等于无障碍友好——光加 disabled 和 not-allowed，没配 aria-disabled 和视觉对比度，对屏幕阅读器用户就是黑盒。
