必须在 form 元素 submit 事件中统一控制 loading 状态，禁用按钮应使用 setAttribute 或 CSS class 切换，通过 e.submitter 识别多按钮，用 finally 恢复状态，CSS 动画依赖 :disabled 伪类，跨表单需隔离作用域、解绑监听、postMessage 通信，遮罩层须绝对定位、pointer-events: none 且 z-index 足够高。
表单 submit 事件里必须统一控制 loading 状态
不能只监听按钮 click，因为表单可通过回车、form.submit()、屏幕阅读器提交等方式绕过按钮——此时 loading 完全不会触发。真正可靠的入口是 form 元素的 submit 事件。
实操建议：
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 给
<form></form>绑定addEventListener('submit', handler)，并在 handler 首行立即操作按钮状态 - 禁用按钮时别直接写
button.disabled = true，改用button.setAttribute('disabled', '')或 CSS class 切换（避免动画失效和无障碍跳过） - 如果表单有多个提交按钮（如“保存”“另存为”），需在事件中通过
e.submitter精确识别目标按钮 - 务必在
fetch().finally()或try/finally块中恢复状态，否则网络失败或 JS 报错会导致按钮永久 disabled
CSS 实现圆形 loading 动画要靠 :disabled 伪类
纯 CSS 方案依赖按钮被禁用时的视觉反馈，不是靠 JS 控制 class 切换。关键在于利用浏览器对 :disabled 的原生支持来驱动动画启停，避免 JS 和 CSS 状态不同步。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给提交按钮设置
border: 2px solid transparent+border-top-color: #007bff+border-radius: 50%拼出旋转圆环 - 动画定义用
@keyframes spin { to { transform: rotate(360deg); } }，配合animation: spin 1s linear infinite - 样式规则必须写成
button:disabled::after或button[disabled]::after，不能写成.loading::after—— 后者需要 JS 同步 class，易漏 - 移动端需加
pointer-events: none防止 touch 事件穿透到下层元素
跨表单场景下 loading 状态容易丢失的三个点
当页面存在多个表单（比如 tab 切换、弹窗表单、嵌套 iframe），loading 提示容易只作用于局部，或相互干扰。根本原因是状态未隔离、DOM 查找不精确、事件监听范围错误。
常见错误现象：
- 点击 A 表单按钮，B 表单的按钮也转圈（因用了全局
document.querySelector('button[type=submit]')） - 弹窗表单关闭后，主页面按钮仍处于 loading（事件监听没解绑，或 finally 未执行）
- iframe 内表单提交，父页面无任何提示（跨域限制导致无法监听，或未用
postMessage通信）
解决办法：
- 每个表单绑定自己的 submit 处理器，用
form.querySelector('button[type=submit]')锁定作用域 - 弹窗打开时注册监听，关闭前显式调用
form.removeEventListener('submit', handler) - iframe 场景下，子页提交完成后发
postMessage({ type: 'form-submit-start' })，父页监听并展示全局遮罩
加载中遮罩层必须脱离表格/容器文档流
如果把 loading 动画直接插在表单内部（比如 <div class="loading"> 放在 <code><button></button> 旁边），动画会参与布局计算，导致按钮位置偏移、文字重排，尤其在响应式断点切换时更明显。
正确做法是用绝对定位层盖住整个表单区域：
- 包裹表单的容器必须设
position: relative - 遮罩层用
position: absolute; top: 0; left: 0; width: 100%; height: 100% - 遮罩背景推荐用
linear-gradient骨架动画，而非 GIF 或 SVG，体积小、缩放无损、可配色 - 遮罩层需设
pointer-events: none，否则会拦截按钮点击；真实禁用逻辑仍靠按钮自身disabled属性
最易被忽略的是：遮罩层的 z-index 必须高于表单内所有可聚焦元素（如 input、select），否则键盘 Tab 仍能切进去，破坏 loading 隔离性。
