最有效的全页锁定方式是上传开始时设 document.body.style.pointerevents = 'none'，但需配合 abortcontroller、显式启用遮罩交互、保留取消按钮及键盘支持，并在请求终态而非 finally 中恢复 pointerevents。
上传开始时用 document.body.style.pointerEvents = 'none' 锁住页面
直接禁用所有鼠标和触摸事件是最粗暴也最有效的“全页锁定”方式。它不依赖按钮状态，也不受表单结构影响，能真正阻止用户在上传期间点击任何元素（包括链接、输入框、其他按钮）。
但要注意：pointerEvents: none 只拦截指针操作，键盘仍可聚焦、Tab 仍可切换、Enter 仍可能触发表单提交——所以它必须配合其他措施，不能单独使用。
- 必须在
fetch或XMLHttpRequest发起前立即设置，否则手快用户可能抢在锁住前点中别的按钮 - 必须在
finally块中恢复：document.body.style.pointerEvents = ''，否则页面永久失活 - 若页面有固定定位的加载遮罩（如
position: fixed; z-index: 9999），建议同时用pointerEvents: auto显式启用遮罩交互，否则遮罩上的“取消”按钮也会失效
为什么不用 document.body.classList.add('locked') 配 CSS？
用 class 控制 pointer-events: none 看似更规范，但实际容易踩坑：CSS 类名可能被其他 JS 覆盖、被框架动态移除、或因样式优先级问题未生效；而直接操作 style.pointerEvents 是强制内联样式，优先级最高，行为确定。
更重要的是，class 方案无法解决“锁住后又动态插入新 DOM”的问题——比如上传中弹出一个 Modal，它的子元素默认继承 pointer-events: none，除非你额外给 Modal 加 pointer-events: auto，而内联写法天然规避了继承干扰。
- 不要写
document.body.className += ' locked'—— 会覆盖原有 class，破坏布局或主题 - 不要只靠 CSS 的
:disabled伪类去控制 body —— body 元素没有disabled属性，该伪类无效 - 如果用了 Vue/React 等框架，避免在模板里绑定
:class="{ locked: isUploading }"，因为响应式更新有微小延迟，存在竞态窗口
AbortController 和页面锁定要一起用
光锁 UI 不等于锁住请求。用户即使点不了按钮，也可能刷新页面、切 Tab 后回来重试、或用 curl 手动重发——这些都绕过前端锁定。所以锁定页面的同时，必须为上传请求配 AbortController，并在页面卸载或用户主动取消时调用 abort()。
否则会出现：用户点了上传 → 页面锁住 → 用户刷新 → 上一个请求还在后台跑着 → 新请求又发一遍 → 后端收到两个相同文件。
- 创建控制器必须在事件处理函数最开头：
const controller = new AbortController() - fetch 里传
{ signal: controller.signal }，别漏掉 - 在
finally里调用controller.abort()是错的——abort 应该只在明确取消时调，正常完成不需要 abort；正确做法是把 controller 实例存为局部变量，在beforeunload或取消按钮回调里 abort
锁定期间必须保留关键反馈通道
全页锁定不是让用户“失联”。用户需要知道：上传是否真在进行？有没有卡住？能不能取消？所以必须在锁定状态下仍可操作少数几个元素：
- 用
z-index把加载遮罩和“取消”按钮提至最上层，并显式设pointer-events: auto - 遮罩内显示实时进度（如
uploadProgress.value），而不是只靠 spinner 动画 - “取消”按钮的 click 事件监听必须在锁定前就绑定好，且不能依赖事件委托（委托事件会被
pointerEvents: none拦截） - 别忘了键盘支持：按
Escape键应等效于点“取消”，需监听keydown并检查event.key === 'Escape'
then 或 catch），而不是 DOM 渲染完成或定时器结束——否则可能提前暴露操作入口，导致并发请求。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
