在类/对象中多次触发事件

Question

为了解释上下文，我有一个名为 Repertory 的 div，其中包含带有类 Card 的 div，在我的类 Explorer 的实例化中，我使用 loadDragNDropEvents() 在卡片上加载 dragstart 和 dragend 事件，当我开始拖动时，我需要制作我的画布有 over 事件和 drop 事件（仅当卡片被拖动时）。

1. Dragstart 和 dragend 被触发了两次，我该如何解决？ 我已经尝试在添加之前做一个 removeEventListener 没有成功
2. 大致如上所述，拖拽和拖放事件没有被删除，我该如何解决？

我的代码：（我简化它以专注于需求）

HTML：

<div id="Repertory">
  <div class="Card">Card 1</div>
  <div class="Card">Card 2</div>
  <div class="Card">Card 3</div>
  <div class="Card">Card 4</div>
  <div class="Card">Card 5</div>
  <div class="Card">Card 6</div>
</div>

<canvas id="canvas" style="width:100px; height: 100px;"></canvas>

JS：

const canvas = document.getElementById("canvas");
var explorer1 = new Explorer(); // Create an Explorer and use loadDragNDropEvents() 2 times

class Explorer() {

  contructor(){
    loadDragNDropEvents();
    loadDragNDropEvents();
  }

  loadDragNDropEvents() {
    const repertory = document.getElementById("Repertory");
    if (repertory == undefined) { return this; }
        
    const cards = repertory.querySelectorAll(".Card"); 
    if (cards.length <= 0) { return this; }

    console.log("loadDragNDropEvents");

    cards.forEach(card => {
      card.addEventListener("dragstart", this.#CardDragStartEvent.bind(this), false);
      card.addEventListener("dragend", this.#CardDragEndEvent.bind(this), false);
    });
  }

  unloadDragNDropEvents() {
    const repertory = document.getElementById("Repertory");
    if (repertory == undefined) { return this; }
        
    const cards = repertory.querySelectorAll(".Card"); 
    if (cards.length <= 0) { return this; }

    console.log("loadDragNDropEvents");

    cards.forEach(card => {
      card.removeEventListener("dragstart", this.#CardDragStartEvent.bind(this), false);
      card.removeEventListener("dragend", this.#CardDragEndEvent.bind(this), false);
    });
  }

  #CardDragStartEvent(event) {
    console.log("dragstart");
    canvas.addEventListener("dragover", this.#CanvasDragOverEvent.bind(this), false);
    canvas.addEventListener("drop", this.#CanvasDropEvent.bind(this), false);
    event.dataTransfer.effectAllowed = "move";
  }

  #CardDragEndEvent(event) {
    console.log("dragend");
    canvas.removeEventListener("dragover", this.#CanvasDragOverEvent.bind(this), false);
    canvas.removeEventListener("drop", this.#CanvasDropEvent.bind(this), false);
  }

  #CanvasDragOverEvent(event) {
    console.log("over");
    event.preventDefault();
    event.dataTransfer.dropEffect = "move";
  }

  #CanvasDropEvent(event) {
    console.log("drop");
    event.preventDefault();
  }

}

提前感谢

Answer 1

我使用另一种不干净但效果很好的方法，如果有人可以解决我的问题，我一直在倾听。

loadDragNDropEvents() {

  this.unloadDragNDropEvents(); // Unload drag and drop events before adding new ones

  const repertory = document.getElementById("Repertory");
  if (repertory == undefined) { return this; }
        
  const cards = repertory.querySelectorAll(".Card"); 
  if (cards.length <= 0) { return this; }

  console.log("loadDragNDropEvents");

  cards.forEach(card => {
    card.addEventListener("dragstart", this.#CardDragStartEvent.bind(this), false);
    card.addEventListener("dragend", this.#CardDragEndEvent.bind(this), false);
  });
}

// Now clone and replace the DOM élément to clea
unloadDragNDropEvents() {

  console.log("unloadDragNDrop");

  let oldRep = document.getElementById("Repertory");
  let newRep = oldRep.cloneNode(true);
  oldRep.parrentNode.replaceChild(newRep, oldRep);
}