drop事件未触发的根本原因是dragover默认被浏览器阻止，必须在dragover回调中调用event.preventdefault()；需用array.from转换datatransfer.files为数组，校验应结合name后缀与type，跨iframe或shadow dom需分别在对应上下文绑定事件。
drop 事件没触发？检查 dragover 是否被阻止了
绝大多数时候 drop 不触发，根本原因不是你没写监听，而是浏览器默认阻止了 dragover 的行为——它不让你“接住”文件。没有 preventDefault()，drop 就永远不会来。
- 必须给目标区域绑定
dragover并在回调里立刻调用event.preventDefault() -
dragenter不够，不能替代dragover；哪怕只拖进去停住不动，也得持续响应dragover - 别在
dragover里做耗时操作（比如读取文件名、校验类型），它会高频触发，卡顿明显
如何安全读取拖进来的文件列表？
event.dataTransfer.files 是唯一可靠入口，但它不是数组，是 FileList 对象，不能直接用 map 或展开运算符（除非转成数组）。
- 推荐写法：
Array.from(event.dataTransfer.files)或[...event.dataTransfer.files] - 注意：如果用户拖的是文件夹（Chrome/Firefox 支持），
dataTransfer.items可能包含webkitGetAsEntry，但files里为空——这时候要走另一套遍历逻辑 - 别假设第一个文件就是用户想要的，多文件拖放很常见，尤其设计稿、日志包场景
限定只接受图片或 PDF？光靠 accept 属性没用
<input type="file" accept="image/*,.pdf"> 的 accept 只影响文件选择框，对拖放完全无效。拖放的类型控制必须手动做。
- 检查每个
File的type字段（如"image/png"），但注意：它可能为空（比如 Windows 上拖 .jpg 文件，type 是空字符串） - 更稳妥的方式是看
name后缀 +type双校验，或者用file.slice(0, 4).arrayBuffer()读魔数（小文件可选） - 校验失败时，建议在
drop回调里直接return，别弹 alert，否则打断拖放体验
为什么拖进 iframe 或 Shadow DOM 里就失效？
跨边界拖放不是自动透传的。iframe 默认隔离事件流，Shadow DOM（尤其是 closed 模式）会截断事件冒泡。
立即学习“前端免费学习笔记（深入）”；
- 若目标在
iframe内，事件监听必须写在 iframe 的window上，主页面绑不到 - Shadow DOM 中，确保 drop 区域在
open模式下，并且dragover和drop都绑定在 shadowRoot 内部节点上 - 移动端 Safari 对 Shadow DOM + 拖放支持极差，基本不可用，别在这上面浪费时间
