按钮禁用必须在submit事件第一行立即执行，如e.target.queryselector('button[type="submit"]').disabled = true，以防止网络延迟导致重复提交；禁用需配合css样式（如cursor: not-allowed）和状态同步，且服务端须做幂等校验。
按钮禁用必须写在 submit 事件第一行
用户点下按钮后立刻发请求，但网络延迟时可能已触发多次 submit。如果把 btn.disabled = true 放在 fetch().then() 里，等于没锁——请求照样并发出去。
- 监听
form.addEventListener('submit', e => { ... })，第一行就执行e.target.querySelector('button[type="submit"]').disabled = true - 多个提交按钮（如“保存”“保存并退出”）要一并禁用：
form.querySelectorAll('button[type="submit"], input[type="submit"]') - 回车提交会绕过 click 事件，但逃不过 submit，所以只绑 click 是不够的
别用 setAttribute('disabled', 'true') 替代 .disabled = true
前者只是写 HTML 属性，不触发 DOM 属性变更；后者才是真实禁用状态，浏览器强制拦截交互、可访问性行为，且被表单序列化逻辑识别。
- React/Vue 等框架中硬写
button.disabled = true会被下一次 re-render 覆盖，应改用状态控制：disabled={isSubmitting} - 服务端返回失败后，必须手动恢复：
btn.disabled = false; btn.textContent = originalText，不能靠定时器自动还原 - 用
once: true选项适合一次性操作（如弹窗确认），但动态插入的新按钮不会继承监听器
禁用状态必须配显式 CSS 样式
浏览器对 button:disabled 的默认渲染差异很大：Chrome 只降 opacity，Safari 不改 cursor，深色主题下按钮可能完全看不出变化。
- CSS 中必须声明：
button:disabled { opacity: 0.6; cursor: not-allowed; background-color: #ccc; } - 避免用
filter: grayscale(100%)——安卓 WebView 中可能失效，还会模糊文字 - 按钮含 SVG 图标时，也要在
:disabled下统一控制fill或opacity，否则图标仍高亮
Chrome 扩展里按钮事件不能写 onclick 属性
Chrome 默认 CSP 策略禁止内联脚本，onclick="handler()" 会直接报错：Refused to execute inline event handler。
- 必须用
addEventListener绑定，且传函数引用而非调用结果：btn.addEventListener('click', handleClick)，不是handleClick() - 确保 DOM 加载完成后再绑定：放在
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
