正确禁用按钮必须使用disabled属性，:disabled仅为样式伪类；仅设pointer-events:none存在无障碍、键盘焦点及表单提交隐患；安全方案需三者结合：disabled属性+button:disabled样式+aria-disabled="true"。
按钮加了 :disabled 但点击事件仍触发？
直接加 disabled 属性才是禁用按钮的正解，:disabled 只是伪类选择器，它不改变元素状态，只负责样式。如果你只是写 button:disabled { opacity: 0.5; } 却没给 <button disabled></button>，那按钮照样能点、照样触发 click 事件。
常见错误场景：用 JS 动态切换 className 模拟禁用，比如加个 is-disabled 类再配 .is-disabled { pointer-events: none; } —— 这时别再画蛇添足套 :disabled 样式，它压根不匹配。
pointer-events: none 能替代 disabled 吗？
不能完全替代，但可作为视觉+交互层面的快速封锁手段。它让元素彻底不响应鼠标/触控事件（包括 click、hover），连子元素也一并拦截（除非子元素显式设 pointer-events: auto）。
注意几个硬伤：
-
pointer-events: none不影响表单提交行为：如果按钮是<button type="submit"></button>，且父表单被 JS 提交，它仍可能参与提交逻辑 - 无障碍支持差：屏幕阅读器通常不会把
pointer-events: none当作禁用状态，也不会读出aria-disabled="true"（如果你没手动加） - 键盘焦点不受控：用户仍可通过
Tab聚焦到该按钮，按Enter或Space仍可能触发默认行为（尤其<button></button>）
真正安全的禁用组合写法
要兼顾功能、可访问性、样式和交互，推荐三件套一起上：
- HTML 层加
disabled属性（必须） - CSS 用
button:disabled控制样式（如opacity、cursor: not-allowed） - 补充
aria-disabled="true"（对非原生可禁用元素如<div role="button"> 尤其关键） <p>示例：</p> <pre class="brush:php;toolbar:false;"><button disabled aria-disabled="true">提交</button> <style> button:disabled { opacity: 0.6; cursor: not-allowed; } </style></pre> <p>如果必须用 <code>pointer-events: none（比如禁用整个卡片区域），请同步加tabindex="-1"和aria-disabled="true"，并确保 JS 中跳过该元素的事件处理逻辑。为什么别在
:disabled里写pointer-events: none？没必要，还埋坑。原生
disabled元素本身已忽略鼠标事件，再叠一层pointer-events: none不仅冗余，还会干扰某些浏览器对:hover或:focus的状态判断（比如 Safari 下可能让:focus-visible失效）。更实际的问题是维护成本：当某天你用 JS 切换
disabled状态时，如果样式依赖pointer-events，而逻辑又漏掉了同步更新，就容易出现「看起来灰了但点得动」或「看起来正常但点不动」的错乱。真要统一控制交互封锁，建议抽成 CSS 自定义属性，比如
--btn-interaction: disabled，再用 JS 控制属性值，CSS 侧用属性选择器分发行为，比混用伪类和样式声明更可靠。
