dragover 事件未调用 preventDefault() 就不会触发 drop；drop 只在松手瞬间鼠标正下方元素触发，且 dataTransfer.files 仅在 drop 回调中可读取。
dragover 事件没调用 preventDefault() 就根本不会触发 drop
浏览器对拖入文件有强默认行为：松手就打开 PDF、预览图片、下载压缩包。只要 dragover 回调里没写 e.preventDefault()，drop 事件压根不会来——你连 event.dataTransfer.files 的边都摸不到。
常见错误现象：
- 控制台没报错，但
drop回调完全不执行 - 鼠标拖到区域上光标始终是“禁止”或“默认”，不是“可投放”状态（→ 表明 dragover 被拦截）
实操建议：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 必须给目标元素（比如
div#dropzone）绑定dragover事件，并在回调第一行就写e.preventDefault() - 只在
drop或dragenter里调preventDefault()是无效的——dragover每几十毫秒触发一次，每次都要阻止 - 如果用了事件委托，确认事件真的冒泡到了绑定节点（比如父容器设了
pointer-events: none就会中断）
drop 事件绑错了 DOM 节点或目标区域不可见
drop 只触发在松手瞬间鼠标正下方的那个元素上，不是父容器、不是整个页面、也不继承——这点和 click 完全不同。很多“没反应”其实是鼠标根本没落在你监听的节点上。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- 目标
div是空的，没设height/width，默认高为 0，拖进来毫无反应 - 被绝对定位的蒙层、
z-index更高的兄弟节点遮挡 - 用 Chrome DevTools 的 Elements 面板 hover 元素时，发现松手那一帧鼠标实际落在了
body或其他无关节点上
实操建议：
- 给目标区域加临时背景色和明确尺寸：
style="background:#eee; min-height:200px;" - 用 DevTools 的 “Elements → hover 元素” 功能，实时观察松手瞬间鼠标落在哪个节点
- 检查是否有 CSS 导致的遮挡：
pointer-events: none、visibility: hidden、opacity: 0等都会让 drag 事件失效
dataTransfer.files 访问时机或方式错误
event.dataTransfer.files 只能在 drop 事件回调中读取，且仅此一次。提前（如 dragenter）、延后（如异步 setTimeout 后）、或用错对象（如 e.target.files），都会是空或报错。
常见错误现象：
-
drop回调执行了，但e.dataTransfer.files.length === 0 - 控制台报错
SecurityError: The operation is insecure（尤其 Safari）
实操建议：
- 确保
dragover和drop两个事件都绑在同一个目标节点上，且都调用了e.preventDefault() - 读取时直接用
Array.from(e.dataTransfer.files)转成数组，别依赖FileList的类数组特性 - 不要用
e.target.files——那是<input type="file">的属性，drag 场景下完全无效 - Safari 对
dataTransfer访问更保守，建议统一用e.preventDefault()+e.dataTransfer.files组合，避免用itemsAPI
浏览器扩展、CSP 或 file:// 协议导致静默拦截
有些拦截不报错、不警告，只是让事件彻底消失。这类问题往往需要跳出代码本身排查运行环境。
常见错误现象：
- 本地双击 HTML 文件（
file:///协议）拖拽完全无响应，但用http://localhost就正常 - 同一页面在 Chrome 正常，在 Edge 或 Safari 失效
- 禁用所有扩展后突然好了
实操建议：
- 先关掉所有浏览器扩展（尤其是 uBlock Origin、Tampermonkey、NoScript）
- 检查地址栏左侧锁形图标 → “网站设置”，确认
Drag and drop权限没被设为Block - 本地开发时别双击 HTML，改用
http://localhost（如用html-deploy工具起服务） - 若用了 CSP，确认
script-src没禁用内联事件；若用内联ondrop="handleDrop(event)"，可能被拦截
真正卡住的时候，90% 是 dragover 没阻止默认行为，剩下 10% 是松手那一帧鼠标没落在你以为的 DOM 上——别猜，打开 DevTools 的 Event Listener 面板，盯着 dragover 和 drop 是否真的触发。
