拖拽时鼠标移出浏览器窗口会触发 dragleave，属标准行为；应通过防抖计时器、document 级 dragover 补位、pointer-events: none 防子元素干扰，并在 drop/dragend 中最终处理状态。
拖拽过程中鼠标移出浏览器窗口边界（比如划到地址栏、标签页或桌面），会意外触发 dragleave，导致高亮状态提前消失、UI错乱甚至上传逻辑中断——这不是 bug，而是浏览器标准行为：只要拖拽光标离开当前 document 范围，就会向目标元素派发 dragleave，哪怕文件还没松开。
用计时器防抖 dragleave
核心思路是：不立刻响应 dragleave，而是等待一小段时间（如 150ms），确认用户真的离开了，再更新状态。
- 在
dragenter中清除旧定时器、标记“已进入”，并设置isDragging = true - 在
dragleave中启动延迟任务：若期间没再触发dragenter，才执行移除高亮、关闭提示等操作 - 在
drop或dragend中主动清理定时器，避免内存泄漏
监听 document 级别的 dragover 补位
当鼠标短暂移出但仍在页面附近（例如滑向书签栏），可监听 document.addEventListener('dragover', ...)，一旦捕获到该事件，说明拖拽仍在进行中，立即重置 UI 状态。
- 这个全局监听只用于“兜底判断”，不替代容器自身的
dragenter/dragover - 需配合
event.relatedTarget === null或检查event.clientX/clientY是否在视口外，辅助判断是否真离开
避免子元素干扰的样式穿透
如果拖拽区域含图标、文字等子节点，鼠标经过它们会频繁触发 dragleave → dragenter 闪动——这不是边界问题，但常被误判为“出界”。解决方式统一：
- 给所有子元素加
pointer-events: none，确保事件始终冒泡到父容器 - 或用 CSS 类控制：进入时给容器设
.drag-over，内部子元素样式全部基于该类继承，不依赖事件逐层绑定
drop 和 dragend 是最终确认点
dragleave 只表示“可能离开”，真正决定是否终止拖拽流程的是 drop（成功上传）或 dragend（取消/失败）。因此：
- 所有临时状态（如 loading、禁用按钮）不要仅靠
dragleave恢复，而应在drop后统一收尾 - 监听
document.addEventListener('dragend', ...)，处理异常中断（如用户按 Esc、切走标签页后松手） - 必要时结合
visibilitychange事件，检测页面是否被切走，提前暂停状态更新
