真正禁用按钮应优先使用原生 disabled 属性，因为 pointer-events: none 仅屏蔽指针事件，不阻止键盘聚焦、不触发 :disabled 样式、不影响表单提交，且存在可访问性与兼容性问题。

pointer-events: none 为什么不能真正禁用按钮

直接给按钮加 pointer-events: none 看似能“禁用”点击，但实际会带来三个典型问题：它不阻止键盘聚焦（Tab 仍可选中）、不触发 :disabled 伪类样式、也不影响表单提交逻辑（比如回车仍可能触发表单）。本质是“屏蔽鼠标/触控事件”，而非语义化禁用。

真正需要禁用按钮时，优先用原生 disabled 属性。只有在必须保留视觉样式（比如不想灰掉）或需禁用某一层容器内所有子元素交互时，才考虑 pointer-events: none。

配合 disabled 属性使用 pointer-events 的真实场景

常见于自定义组件封装：父容器需要统一拦截交互，但子按钮仍需保持 disabled 的语义和键盘行为。此时可在父级设 pointer-events: none，再对按钮单独设 pointer-events: auto 并添加 disabled 属性——这样既阻止鼠标穿透，又保留可访问性。

• 父容器：<div class="card" style="pointer-events: none"> <li>按钮本身：<code><button disabled style="pointer-events: auto">提交</button>
• 注意：若父级用了 pointer-events: none，子元素必须显式设 pointer-events: auto 才能响应事件

pointer-events 在非 button 元素上的坑

对 a 标签或带 onclick 的 div 使用 pointer-events: none 后，链接不会跳转、内联 JS 不会执行——这看似符合预期，但容易忽略两个副作用：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• 屏幕阅读器仍会把该元素当作可交互内容朗读（缺乏语义）
• 如果该元素有 focus 样式（比如 outline），键盘导航时焦点仍会停在上面，造成操作错觉
• 部分旧版 Safari 对 pointer-events 在表单控件上支持不稳定，建议测试 iOS 14+

替代方案：用 CSS + aria-disabled 控制可访问性

当必须视觉上启用、逻辑上禁用时（比如加载中按钮），别只靠 pointer-events: none。应组合使用：

• 添加属性：aria-disabled="true"
• 移除原生 disabled（避免样式重置）
• 手动绑定事件拦截：onclick="return false" 或 JS 中 event.preventDefault()
• 用 cursor: not-allowed 和透明度辅助视觉反馈

这样既阻止交互，又让辅助技术感知状态，比单纯 pointer-events: none 更可靠。

真正难的不是加一行 CSS，而是判断「这里到底该禁用语义，还是只屏蔽指针」——多数时候，老老实实用 disabled 最省心；只有当 DOM 结构或设计约束逼你绕开它时，才需要深挖 pointer-events 的边界行为。