正确禁用按钮必须使用disabled属性，:disabled仅为样式伪类；仅设pointer-events:none存在无障碍、键盘焦点及表单提交隐患；安全方案需三者结合：disabled属性+button:disabled样式+aria-disabled="true"。
按钮加了 :disabled 但点击事件仍触发？
直接加 disabled 属性才是禁用按钮的正解，:disabled 只是伪类选择器，它不改变元素状态，只负责样式。如果你只是写 button:disabled { opacity: 0.5; } 却没给 <button disabled>，那按钮照样能点、照样触发 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">，且父表单被 JS 提交，它仍可能参与提交逻辑 - 无障碍支持差：屏幕阅读器通常不会把
pointer-events: none当作禁用状态，也不会读出aria-disabled="true"（如果你没手动加） - 键盘焦点不受控：用户仍可通过
Tab聚焦到该按钮，按Enter或Space仍可能触发默认行为（尤其<button>）
真正安全的禁用组合写法
要兼顾功能、可访问性、样式和交互，推荐三件套一起上：
- HTML 层加
disabled属性（必须） - CSS 用
button:disabled控制样式（如opacity、cursor: not-allowed） - 补充
aria-disabled="true"（对非原生可禁用元素如<div role="button">尤其关键）
示例：
<button disabled aria-disabled="true">提交</button>
<style>
button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>
如果必须用 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 侧用属性选择器分发行为，比混用伪类和样式声明更可靠。
