HTML5拖放的dragover和dragenter事件区别

Question

我想了解HTML5 拖放中dragover和dragenter事件的区别。

我不清楚它们之间的区别。

- Yan

---

我认为下面@ScaisEdge的回答应该被采纳。 - Eric Burel

Answer 1

当你把一些东西拖进目标元素时，dragenter事件就会发生，并停止。

而dragover事件则在你拖动某物直到放下它的整个过程中都会发生。

看这里：

$('.dropzone').on("dragover", function (event) {
    console.log('dragover');
});
$('.dropzone').on("dragenter", function (event) {
    console.log('dragenter');
});

现在查看控制台：

正如您所见的，当您将元素拖入目标时，dragenter事件只会发生一次。

但是 dragover 事件 每隔几百毫秒就会发生一次。

drag 和 dragstart 之间也存在同样的差异，dragstart 只会发生一次，但 drag 每隔几百毫秒就会发生一次。

- cool

Answer 2

基于dragenter和dragover MDN文档...

dragover

当元素或文本选择被拖动到有效的放置目标上时，会每隔几百毫秒触发一次dragover事件。

dragenter

当拖动的元素或文本选择进入有效的放置目标时，会触发dragenter事件。

dragover事件在光标停留在元素上的每350毫秒后触发。

- ScaisEdge

---

请注意，如果在不移动移动的情况下重新渲染元素（例如每隔几秒钟用几个新元素替换元素），则dragenter事件似乎会再次触发。 - Eric Burel

Answer 3

dragenter:

dragenter事件仅在拖动可拖动元素时，光标进入具有附加ondragenter事件的DOM元素区域时触发。

dragover:

另一方面，dragover事件在拖动可拖动元素并且光标恰好位于屏幕内具有附加ondragover事件的DOM元素区域时“不断”触发。

---

区别在于（拖动时），当光标进入丢弃区域时，dragover 会不断地触发（在鼠标移动时），而dragenter仅在光标“进入”时触发一次。

function dragover(e) {
 console.log("drag over")
}

function dragenter(e) {
  console.log("drag enter!!!")
}

#target{
  width: 200px;
  height: 200px;
  background: lightyellow;
  border: 1px solid gold;
}

div[draggable]{
  width: 60px;
  height: 60px;
  background: red;
}

<div draggable="true">Drag Me</div>
<div id="target" ondragover="dragover(event)" ondragenter="dragenter(event)">Drop Zone</div>

- vsync