想知道html5拖放的dragover和dragenter事件的区别

Question

我想知道html5拖放的dragover和dragenter事件的区别。我不清楚这种差异。

Answer 1

dragenter事件发生在您将某些内容拖入目标元素的那一刻，然后它就会停止。 dragover事件发生在你拖动它的时候，直到你放弃它。

看这里：

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

现在看到控制台：

正如您所看到的那样，dragenter发生一次（当您将元素拖入目标时）。

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

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

Answer 2

基于dragenter和dragover MDN doc ...

的dragover

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

的dragenter

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

当光标停留在元素上时，dragover在一小段延迟（我认为每350毫秒）后被触发。