嵌套拖放 AddEventListener 中的事件会发生什么？

Question

我有以下嵌套的 addEventListener 来跟踪拖动的元素和我要拖动到的元素。

var objects = document.querySelector('.objects');
var destination = document.querySelector('.dest');


objects.addEventListener('dragstart', function(e) {
    console.log("dragstart")
    destination.addEventListener('dragover', function(e2) { e2.preventDefault(); });
    destination.addEventListener('drop', function(e2) {
        console.log("drop")
        console.log(e.target);
        console.log(e2.target);

    })
})

<style>
  div >div {
    margin: 50px;
    width: 100px;
    height: 100px;
    background-color: green;
  }
</style>

<body>
  <div class="objects">
    <div draggable='true' id='o1'>A</div>
  </div>

  <div class="dest">
    <div id='D1' >1</div>
  </div>
</body>

第一次拖放一切似乎都符合我的预期，但是当我第二次拖放时，drop 的addEventListener 执行了两次，第三次执行了三次。为什么？如果我只 console.log 拖放字符串，则不会出现这种加倍和三倍的行为。事件 e 和 e2 会发生什么？

Answer 1

您可以使用 removeEventListener 删除之前添加的事件，这样它就不会在每次拖动时都重新添加，为此您只需单独存储该函数即可

var objects = document.querySelector('.objects');
var destination = document.querySelector('.dest');


function dragFnc(e2) { 
  e2.preventDefault(); 
}
function dropt(e2) {
        console.log("drop")
        console.log(e2.target);
        e2.target.removeEventListener("dragover",dropt)
        e2.target.removeEventListener("drop",dragFnc)
}
objects.addEventListener('dragstart', function(e) {
    console.log("dragstart")
    destination.addEventListener('dragover', dragFnc);
    destination.addEventListener('drop', dropt)
})

<style>
  div >div {
    margin: 50px;
    width: 100px;
    height: 100px;
    background-color: green;
  }
</style>

<body>
  <div class="objects">
    <div draggable='true' id='o1'>A</div>
  </div>

  <div class="dest">
    <div id='D1' >1</div>
  </div>
</body>

嵌套拖放 AddEventListener 中的事件会发生什么？

What happens with the events in nested drag drop AddEventListener?

javascript

drag-and-drop

addeventlistener