需同时调用preventDefault()和stopPropagation()：dragover必须阻止默认行为否则drop不触发，drop中也应再次调用；仅阻止冒泡不能阻止默认行为，反之亦然；应仅对目标元素处理，避免全局影响。
在 JavaScript 中，阻止文件拖拽事件的默认行为（比如浏览器打开文件、跳转到文件 URL）和冒泡，需要分别处理两个关键点：一是调用 event.preventDefault() 阻止默认行为，二是调用 event.stopPropagation() 阻止事件冒泡。但要注意，**仅阻止冒泡不能阻止默认行为，反之亦然**。
阻止拖拽过程中的默认行为（关键）
拖拽涉及多个事件（dragenter、dragover、drop），其中 dragover 和 drop 必须显式阻止默认行为，否则浏览器会执行其内置逻辑（如显示“禁止”图标、尝试打开文件等）。
-
dragover事件必须阻止默认行为，否则drop事件根本不会触发（这是规范要求） -
drop事件中也建议再次调用preventDefault()，确保安全 - 只对目标元素（如上传区域）监听并阻止，避免全局影响
阻止事件冒泡（按需）
如果父容器也有拖拽监听器，而你只想让子区域处理，可调用 stopPropagation() 阻止向上冒泡：
- 在
dragenter、dragover或drop回调中调用event.stopPropagation() - 注意：冒泡阻止后，父级同类型事件将收不到该事件，需确认是否符合业务逻辑
- 通常只需在
drop阶段阻止冒泡，dragover阻止冒泡可能影响嵌套区域的高亮逻辑
完整示例代码
以下是一个安全、常用的拖拽上传区域处理方式：
立即学习“Java免费学习笔记（深入）”；
const dropArea = document.getElementById('drop-area');
dropArea.addEventListener('dragenter', (e) => {
e.preventDefault(); // 允许进入（必要）
e.stopPropagation();
});
dropArea.addEventListener('dragover', (e) => {
e.preventDefault(); // ⚠️ 必须！否则 drop 不触发
e.stopPropagation();
});
dropArea.addEventListener('drop', (e) => {
e.preventDefault(); // 再次确保默认行为被阻止
e.stopPropagation();
const files = e.dataTransfer.files;
console.log('接收到文件:', files);
// 这里处理文件上传逻辑
});
常见误区提醒
这些做法容易导致失败或异常表现：
- 只在
drop里preventDefault()，却忽略dragover→drop事件永远不会触发 - 给
body或document绑定dragover并阻止默认 → 可能干扰页面其他拖拽功能 - 混淆
stopPropagation()和stopImmediatePropagation()→ 前者只阻止冒泡，后者还阻止同一元素上其他监听器执行 - 未校验
e.dataTransfer?.files直接使用 → 拖入的可能是文本、链接等非文件内容
