按钮禁用后仍响应点击，根本原因是未使用原生可禁用元素或未正确设置disabled属性；应优先用<button>等原生控件，JS动态禁用须用el.disabled=true而非setAttribute，且需检查事件是否绑定在父容器未判断target.disabled。
按钮禁用后还响应点击？检查:disabled是否真生效
很多同学加了 disabled 属性，但按钮视觉没变、甚至还能触发 click 事件——根本不是样式问题，是属性没正确设置。HTML 中只有原生表单控件（<button>、<input type="button">、<input type="submit">）支持 disabled 属性的语义行为；用 <div> 或 <span> 模拟按钮时，加 disabled 属性完全无效，浏览器既不阻止事件，也不匹配 :disabled 伪类。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保用的是原生可禁用元素，比如优先写
<button type="button">，别用<div role="button"> - 动态禁用必须用 JS 设置
el.disabled = true，而不是只加disabled字符串属性（如el.setAttribute('disabled', '')在部分老浏览器中不触发行为） - 禁用后仍能点击，大概率是事件监听绑在了父容器上，且没检查
event.target.disabled
:disabled 样式被覆盖？优先级和重置要点
CSS 中 :disabled 的权重和普通类名一样（一个伪类算 10），很容易被后续规则覆盖。常见现象是按钮禁用后文字颜色没变灰、背景色还是高亮态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
button:disabled规则放在样式表靠后位置，或加!important（仅限快速验证，生产环境慎用） - 禁用态要彻底“失效感”，建议显式重置：背景色、边框色、文字色、光标（
cursor: not-allowed）、pointer-events（注意：设为none会阻止所有事件，包括focus，慎用） - 避免依赖继承样式，比如不要只写
button:disabled { color: #999; }，而漏掉background和border，导致禁用后反而更醒目
React/Vue 里按钮禁用逻辑写错？别混用 disabled 和 CSS 类
框架项目中常有人用 className={isDisabled ? 'btn-disabled' : ''} + 手写 .btn-disabled { opacity: 0.5; cursor: not-allowed; }，这看起来像禁用，但实际没阻止事件、没语义、不被屏幕阅读器识别。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- React 中始终用
<button disabled={isSubmitting}>，让框架透传disabled属性到 DOM - Vue 中用
<button :disabled="isSubmitting">，避免写成v-bind:class="{ 'is-disabled': isSubmitting }" - 如果需要禁用态有不同动画或过渡，用
:disabled配合transition（CSS）或will-change，别绕过原生能力
移动端点击穿透、伪类不触发？兼容性冷知识
iOS Safari 15.4+ 和部分 Android WebView 对 :disabled 的渲染有延迟，尤其配合 CSS transition 时，禁用瞬间样式可能卡住一帧；更隐蔽的是，某些安卓机型下 :disabled 不触发 touchstart，但 click 还能冒泡上来。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁用按钮时，同步加
pointer-events: none（仅作兜底，不能替代disabled） - 避免给
:disabled按钮写transition: all，指定关键属性如transition: background-color 0.2s, opacity 0.2s - 真遇到点击穿透，检查是否父层用了
overflow: hidden+ 圆角 + 禁用态重绘异常，临时方案是禁用时加transform: translateZ(0)强制硬件加速
最麻烦的其实是「半禁用」需求：比如按钮可点击但只允许点一次，或根据异步状态切换禁用——这时候 disabled 是唯一可靠锚点，任何用 class 模拟的方案都会在可访问性、测试覆盖率和事件流上出问题。
