dragenter 和 dragleave 非必需但影响体验，需配合 dragover.preventdefault() 才能触发；dragleave 易误触发，建议防抖或改用 drop/dragend 清理状态。

dragenter 和 dragleave 事件到底要不要监听

这两个事件不是上传功能必需的，只用于视觉反馈。浏览器不会因为没监听它们就丢文件或报错，但用户拖着文件靠近区域时没高亮，体验会明显变差。

常见错误是把 dragleave 当成“鼠标移出容器”来用——其实它会在子元素间频繁触发（比如从 div 移到里面的 span 就算一次），直接删 class 很容易误清状态。

• 建议只在 dragenter 里加 hover 类，比如 drop-area--active
• dragleave 不要直接删类，改用计时器防抖：延迟 50ms 再检查 event.relatedTarget 是否还在容器内
• 如果只是做个简单预览区，甚至可以跳过这两个事件，只靠 dragover 的持续触发做样式维持

为什么拖进来了却没触发 dragenter

最可能的原因是事件没绑定到真正接收拖拽的 DOM 节点上。比如你绑在 document 或父级 section 上，但中间有某个子元素阻止了事件冒泡（比如用了 event.stopPropagation()），或者该子元素本身有 pointer-events: none。

调试方法很简单：在回调里加 console.log('enter')，拖进去没输出，就说明事件根本没走到你写的监听函数里。

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 确保目标元素是明确的语义化容器，例如 <div id="drop-area"> <li>别用 CSS 选择器动态找元素后绑定，要用 <code>document.getElementById 或 ref 拿到真实 DOM
• React/Vue 中尤其注意：虚拟节点上的 @dragenter 可能不生效，必须用 ref + addEventListener

dragover 必须调 preventDefault 才能连带激活 dragenter

dragenter 能否被触发，取决于浏览器是否认定该区域“允许放置”。而这个判定发生在 dragover 阶段——如果你没在 dragover 回调里调 event.preventDefault()，浏览器就默认不接受拖入，后续的 dragenter 和 drop 都不会触发。

也就是说，dragenter 是个“副产品”，它的存在依赖于 dragover 的正确拦截。

• 哪怕你只想做视觉反馈，也得写一个空的 dragover 监听并调 preventDefault()
• 顺手设 event.dataTransfer.dropEffect = 'copy'，能让鼠标图标更准确，避免显示“禁止”符号
• 不要只在 drop 里 preventDefault()，那对 dragenter 完全没用

dragleave 触发时机比你想的更敏感

它不仅在鼠标移出容器时触发，还会在拖拽过程中经过子元素边界、进入子元素、再出来时反复触发。很多 UI 库用它做“离开即取消高亮”，结果用户稍微晃一下鼠标，高亮就闪退。

这不是 bug，是规范行为。HTML5 拖放模型把每个 DOM 节点都当作独立可投放目标，所以进出子树都会产生事件。

• 真要用 dragleave 清理样式，务必配合 event.relatedTarget 判断目标是否还在容器内部
• 更稳妥的做法是：只在 drop 和 dragend 时清除高亮，忽略 dragleave
• 移动端基本不触发这些事件，别指望它们在触屏设备上有稳定表现
拖拽事件链的真实依赖关系容易被忽略：没有 dragover.preventDefault()，dragenter 和 drop 都是摆设；而 dragleave 的频繁触发又常常让开发者误以为逻辑有问题——其实只是没理解它的设计意图。