按钮禁用后点击事件仍触发是因为仅靠样式或未正确移除disabled属性；正确做法是禁用时设button.disabled = true，启用时先设false再removeattribute('disabled')。
按钮禁用后点击事件还触发？检查 disabled 属性是否真正生效
HTML 按钮的禁用不是靠视觉灰化实现的，而是依赖 disabled 属性是否存在——只要 DOM 中该属性存在（哪怕值是 false 或空字符串），浏览器就会阻止点击、聚焦和表单提交。常见错误是用 JavaScript 写成：button.disabled = false 却没同步移除属性，导致 button.hasAttribute('disabled') 仍为 true，按钮看似启用实则无效。
- 正确启用：先设
button.disabled = false，再调用button.removeAttribute('disabled') - 正确禁用：直接
button.disabled = true（会自动添加属性）或button.setAttribute('disabled', '') - 避免用
button.className += ' disabled'这类纯样式方案——它不阻断事件，也不影响表单提交逻辑
用 querySelector 批量操作多个按钮时注意选择器精度
如果页面有多个提交按钮（如“保存”“取消”“删除”），用 document.querySelectorAll('button') 会选中全部，容易误操作。更安全的做法是加语义 class 或 data 属性：
document.querySelectorAll('button[data-action="submit"]')
这样既避免干扰导航类按钮（如 <button type="button"></button>），也方便后续扩展。若按钮在 form 内且需统一控制，可优先选 form.querySelector('button[type="submit"]')。
- 禁用整个表单的提交按钮：
form.querySelectorAll('button[type="submit"], input[type="submit"]') - 不要用
input:disabled选择器去查状态——它匹配的是初始 HTML 中带disabled的元素，不反映 JS 动态修改后的状态 - 禁用后记得重置按钮文字（如从“提交中…”切回“提交”），否则用户可能重复点击已禁用但文字未变的按钮
React/Vue 等框架里别直接操作 DOM 的 disabled
在声明式框架中硬写 button.disabled = true 会绕过响应式系统，导致状态不同步、下次 re-render 被覆盖。应该把禁用状态收敛到组件 state 中：
// React 示例<br>function SubmitButton({ isLoading }) {<br> return <button disabled type="submit">{isLoading ? '提交中...' : '提交'}</button>;<br>}
- Vue 中用
:disabled="isSubmitting"，而非ref+dom.disabled = true - 如果必须用原生操作（比如集成第三方库），操作完要手动触发
forceUpdate()或更新对应 reactive 变量 - 服务端渲染（SSR）场景下，首次 hydrate 前按钮状态由服务端 HTML 决定，JS 初始化时要确保 state 和 DOM 一致，否则出现闪烁或禁用失效
禁用按钮后仍能通过 Enter 键提交？处理 keydown 事件要谨慎
即使按钮被禁用，如果焦点还在它上面，用户按 Enter 仍可能触发表单默认提交行为（尤其 type="submit"）。这不是按钮本身的问题，而是表单级行为。解决方式不是监听按钮的 keydown，而是：
- 在表单上监听
submit事件，用event.preventDefault()配合状态判断 - 禁用按钮的同时，把焦点移到安全位置（如
form.firstElementChild.focus()），避免键盘操作残留 - 不要给按钮加
onkeydown="if(event.key==='Enter') event.preventDefault();"——这会破坏无障碍访问，且无法阻止表单级提交
真正关键的点在于：禁用按钮只是 UI 层限制，表单提交逻辑必须独立校验。哪怕按钮灰了，后端也得验证请求合法性——前端禁用从来就不是安全措施。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
