dragover事件必须阻止默认行为，否则drop事件不会触发；需在dragover和dragenter中调用e.preventDefault()；drop中读取文件时应检查files.length、监听FileReader.onerror，并注意Chromium系浏览器对文件夹拖拽的限制。
dragover 事件必须阻止默认行为，否则 drop 不会触发
浏览器对文件拖拽有严格限制：如果 dragover 事件没调用 event.preventDefault()，后续的 drop 事件根本不会触发——你连“错误”都捕获不到，因为压根没进入 drop 流程。
常见错误是只在 drop 里阻止默认行为，但这时已经晚了。正确做法是在 dragover 和 dragenter 中都明确阻止：
element.addEventListener('dragover', (e) => {
e.preventDefault(); // 必须有
e.stopPropagation();
});
element.addEventListener('drop', (e) => {
e.preventDefault(); // 这里也要写，但不是“救火”关键
// 后续处理文件
});drop 事件中如何识别文件读取失败
拖拽释放本身很少报错，真正出问题的是后续读取：比如用户拖了文件夹（非文件）、拖了无权限访问的路径（如系统保护目录）、或浏览器不支持的类型（如某些加密容器）。这些错误不会抛异常，而是让 FileReader 的 onerror 触发。
-
event.dataTransfer.files是FileList，但它可能为空（例如拖了文件夹且浏览器未暴露内容） - 检查
files.length === 0是第一道过滤，别直接进FileReader - 对每个
File调用readAsText()或readAsArrayBuffer()后，必须监听reader.onerror，而非依赖 try/catch - 注意
reader.error是 DOMException，常见code: 5（NOT_READABLE_ERR）表示文件不可读
Chrome 和 Edge 拖拽文件夹时 behavior 不一致
Chrome（基于 Chromium）从 97 版本起默认禁用拖拽文件夹读取子文件，即使你调用了 e.preventDefault()，dataTransfer.items 里也只返回一个 Directory 条目，没有实际 File 对象；而旧版 Edge 或 Firefox 可能返回空或报错。
立即学习“前端免费学习笔记（深入）”；
如果你需要支持文件夹，得主动用 item.webkitGetAsEntry()（仅 Chromium）递归遍历，但这和“捕获错误”关系不大——它本质是功能缺失，不是错误。真正要捕获的是这个调用返回 null 或 entry.isDirectory === false 却误当文件处理的情况。
建议逻辑：
for (let item of e.dataTransfer.items) {
const entry = item.webkitGetAsEntry?.();
if (!entry) continue; // 非 Chromium 或不支持
if (entry.isDirectory) {
// 需要额外递归读取，且可能被用户拒绝权限
} else if (entry.isFile) {
entry.file((file) => { /* 处理单个文件 */ });
}
}监听 dragleave 容易误判导致 UI 错乱
很多人想在拖出区域时恢复提示样式，于是监听 dragleave，但这个事件触发非常频繁：只要鼠标划过子元素就会触发，哪怕还没离开父容器。结果就是“高亮态闪退”，用户以为操作失败。
更稳的做法是用计时器 + 元素边界判断：
- 在
dragenter中设置isDraggingOver = true并更新 UI - 在
dragleave中启动一个setTimeout，延迟 50ms 再检查event.relatedTarget是否仍在当前容器内 - 或者直接放弃
dragleave，只靠drop和dragend（后者在拖拽结束时触发，不管成功与否）来收尾
真正该关注的“错误状态”，其实是 drop 后没有任何 File、FileReader 报 NOT_READABLE_ERR、或用户取消了文件系统权限提示——这些才是影响功能落地的关键点。
