拖拽文件到页面跳转的根本原因是未阻止dragover和drop的默认行为；浏览器会尝试打开文件，必须在两事件中均同步调用e.preventDefault()，缺一不可。
拖拽文件到页面为什么会跳转
浏览器对 drop 事件本身不触发跳转，真正导致页面“意外跳转”的是未阻止 dragover 和 drop 的默认行为——当文件被拖入页面时，浏览器会尝试用该文件“打开”它（比如 PDF 直接预览、图片新开标签页），若未拦截，就表现为整个页面跳转或刷新。
必须阻止的两个事件：dragover 和 drop
只监听 drop 并调用 e.preventDefault() 不够，因为 dragover 是前置必要事件；若它没被阻止，drop 根本不会触发（浏览器直接拒绝接收拖放）。
-
dragover必须在事件处理器首行调用e.preventDefault()，否则drop永远收不到 -
drop中也必须调用e.preventDefault()，否则浏览器仍会尝试打开文件 - 两者缺一不可，且不能只靠 CSS 或属性禁用——这是 DOM 级行为，只能靠 JS 拦截
示例：
document.addEventListener('dragover', e => {
e.preventDefault(); // 关键：允许后续 drop
});
document.addEventListener('drop', e => {
e.preventDefault(); // 关键：阻止浏览器打开文件
const files = e.dataTransfer.files;
console.log('收到', files.length, '个文件');
});
常见漏掉的坑：事件绑定时机与目标范围
如果页面有多个可拖放区域（如侧边栏、弹窗、卡片），但只给 document 绑了事件，可能因事件冒泡延迟或目标错位导致失效；反之，若只绑在某个容器上，而用户把文件拖到了容器外（比如顶部导航栏空白处），drop 就不会触发。
- 推荐优先绑定到
document，确保全局捕获 - 若需限定区域，用
event.target.closest('.drop-zone')判断是否落在有效容器内，再执行逻辑 - 避免在
drop里直接读取e.dataTransfer.items而不先检查files.length，某些系统（如 macOS Safari）可能返回空files但有items，需额外兼容
为什么 preventDefault() 放在 setTimeout 里就失效
有些开发者想“延后处理”，把 e.preventDefault() 包进 setTimeout，这会导致完全无效——事件默认行为在同步阶段已发生，异步调用毫无意义。
-
e.preventDefault()必须在事件回调的同步执行流中、最开始就调用 - 不要加任何条件判断或 await 前置逻辑，先保默认行为被阻断，再做业务处理
- 如果你需要校验权限或弹窗确认，应提前拦截（比如禁用拖放区域样式 +
pointer-events: none），而不是等drop触发后再犹豫
拖拽文件时页面跳转看似随机，其实每一步都有明确触发链；最容易被忽略的是 dragover 的拦截必要性——它不像表单 submit 那样有明显语义，但缺失它，整个拖放流程就从底层被浏览器掐断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
