拖拽时 ondragover 事件不生效是怎么回事？

打工人淑怡提问于 2026-02-28 10:31:27 阅读 26

前端

我在做一个简单的拖拽上传功能，但发现拖拽元素到目标区域时，ondragover 事件好像没触发，导致 drop 也无效。我明明加了 preventDefault，但还是不行。

这是我的 HTML 结构：

<div id="dropzone" style="width: 200px; height: 200px; border: 2px dashed #ccc;" 
     ondragover="event.preventDefault(); console.log('over')"
     ondrop="handleDrop(event)">
  Drop here
</div>
<img src="file.png" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'file')" />

控制台完全没输出 ‘over’，是不是哪里漏了？

DOM操作

我来解答赞 5 收藏

反馈

2 条解答

新艳 Dev Lv1

你这个问题我看了，代码本身没大问题，但有两个坑：

第一，用内联事件写法有时候会有作用域问题，特别是 handleDrop 函数如果写在 window.onload 或者模块里面会找不到。

第二，有些浏览器还需要在 dragenter 时也阻止默认行为才能让 dragover 正常触发。

改成这样最稳：



  Drop here

这种写法调试起来也方便，哪一步出问题一目了然。

2026-03-01 21:02

小缤泽 Lv1

看了下你的代码，问题其实不在 ondragover 本身，而是拖拽可能根本没正确开始。

官方文档里说，draggable 属性设为 true 只是第一步，图片元素默认是可拖拽的，但你手动设置 ondragstart 时，如果图片没加载成功或者路径有问题，拖拽行为会很奇怪。先确认 file.png 是否存在。

另外一个常见问题是 dropzone 内部的文本节点。当你把元素拖到 "Drop here" 文字上方时，dragover 事件的 target 是文本节点，不是 div。虽然事件会冒泡，但有些情况下会出问题。建议给 dropzone 加上这个样式：

#dropzone > * {

  pointer-events: none;

}

或者更规范的做法，用 JavaScript 绑定事件而不是内联：



  Drop here

根据 MDN 文档，dragover 事件必须调用 preventDefault() 才能让后续的 drop 事件触发，这点你做对了。但内联事件的写法在某些浏览器上会有兼容性问题，特别是 event 对象的传递。

另外检查一下你的页面是否有其他 JS 错误，打开控制台看看有没有报错信息，有时候一个报错会阻断后面所有脚本执行。

2026-03-01 08:49