dragover与HTML5拖放事件的比较
dragover与HTML5拖放事件的比较
提问于 2015-09-20 07:25:55
我想知道dragover和dragenter事件在HTML5 拖拽中的区别。
我不清楚有什么区别。
回答 3
Stack Overflow用户
发布于 2017-01-31 14:04:21
拖放事件发生在您将某物拖入目标元素时，然后它停止。拖放事件发生在拖放某物的时间，直到你放下它为止。
看这里：
$('.dropzone').on("dragover", function (event) {
console.log('dragover');
});
$('.dropzone').on("dragenter", function (event) {
console.log('dragenter');
});现在请参阅控制台：
如您所见，拖放器只发生一次(当您将元素拖入目标时)。
但是dragover事件每几百毫秒发生一次，。
拖动和拖放启动之间存在相同的差异，拖放启动只发生一次，但是拖动每几百毫秒发生一次。
Stack Overflow用户
发布于 2015-09-20 08:14:52
Stack Overflow用户
发布于 2019-10-19 18:00:42
只有当拖动可拖动的元素时，dragenter事件才会触发，游标进入-- DOM元素的区域，其中附加了ondragenter事件。
另一方面，dragover事件是在拖动可拖元素时“不断地”触发的，光标恰好位于DOM元素区域内的屏幕上，该DOM元素将ondragover事件附加到该区域。
不同之处在于，当游标进入下拉区域时(拖动时)，当光标“进入”时，
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32676890
复制相关文章
相似问题
腾讯云开发者
