禁用按钮必须使用disabled属性而非仅靠pointer-events: none，因后者无法阻止键盘聚焦和屏幕阅读器读取；正确做法是设置el.disabled = true并配合css视觉反馈与aria-disabled="true"确保无障碍支持。
直接用 pointer-events: none 就能禁用点击，但它不是万能解法——禁用后元素仍可被键盘聚焦、屏幕阅读器仍会读作可操作项，纯靠 CSS 无法替代语义化控制。
button 禁用必须用 disabled 属性，别只靠 CSS
原生按钮禁用逻辑和无障碍支持，只在 disabled 属性真实存在时生效。比如：<button disabled>提交</button> 会自动跳过 Tab 键序、不参与表单提交、被屏幕阅读器忽略。
常见错误：
- 只加
class="is-disabled"并用 CSS 隐藏或改色，但没设disabled属性 → 按钮依然能点、能聚焦、能提交 - JS 动态禁用写成
el.setAttribute('disabled', '')→ 在部分旧浏览器中不触发实际禁用行为，应写el.disabled = true - 事件监听绑在父容器上，且没检查
event.target.disabled→ 点击禁用按钮仍会触发 handler
pointer-events: none 的适用场景和坑
它适合临时屏蔽交互，比如遮罩层、水印、装饰性图标，但不适合替代表单控件的禁用状态。
关键限制：
- 对
<input>、<button></button>加了pointer-events: none后，仍可通过 Tab 键获得焦点，键盘用户可能卡住 - 子元素默认继承
none，若想让内部某个按钮恢复可点，必须显式写button { pointer-events: auto; } - IE10 及更早版本完全不支持该属性；IE11+ 支持，但旧版 Safari 对
pointer-events: none在嵌套 SVG 中有透传异常 - 它会同时禁掉滚动（因滚动依赖
mousedown/touchstart），如需保留滚动，不能只靠这个属性
视觉反馈必须手动补全
:disabled 伪类不会自动灰化背景或改光标，pointer-events: none 更是完全不管样式。用户需要明确感知“不可操作”。
务必同步设置：
-
cursor: not-allowed（尤其button:disabled规则里要显式写） -
opacity: 0.5或filter: grayscale(80%)，避免仅靠颜色变化（易被色弱用户忽略） - 显式重置
background、border、color，防止禁用后反而更醒目 - 若用
pointer-events: none替代disabled，建议额外加tabindex="-1"和aria-disabled="true"补齐可访问性
最稳妥的做法：优先用原生 disabled 属性控制状态，CSS 只负责视觉反馈；只有在遮罩、装饰等非语义场景下，才单独用 pointer-events: none。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
