拖拽事件类型 drag 和 dragstart 的确切区别是什么？

Question

拖拽事件类型 drag 和 dragstart 的确切区别是什么？

5

从MDN文档中我可以看到：

拖动 - 当元素或文本选择正在被拖动时触发。拖动开始 - 当用户开始拖动元素或文本选择时触发

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

但是为什么当我将函数附加到“拖动”事件时，浏览器会忽略它，而当我改为使用“dragstart”时，它却完全正常呢？从定义上来看，它们应该是一样的吧（？）

function itemDrag(e) {
e.dataTransfer.setData("text", e.target.id);  
}


document.getElementById("try1").addEventListener("dragstart",function(){
    itemDrag(event);
});

- Zebra

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Randy · Accepted Answer

拖动开始时，会触发dragstart事件。当元素或文本选择正在被拖动时（每隔几百毫秒），会触发drag事件。因此，dragstart应该只触发一次，而drag应该持续触发。这来自MDN页面。

https://developer.mozilla.org/en-US/docs/Web/Events/drag https://developer.mozilla.org/en-US/docs/Web/Events/dragstart

示例：

let continu = 0;

document.addEventListener("dragstart", function( event ) {

     console.log('start');
     
}, false);
  
document.addEventListener("drag", function( event ) {

  if(continu < 5){
     console.log('continu');
  }
  
  continu ++;
  
}, false);

<div class="dropzone">
  <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
    This div is draggable
  </div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>

拖动相关事件：