为什么图像在添加 EventListener（DOM）时会消失？以及如何解决？

2024-03-09 18:36:35

图像在添加 EventListener（DOM）时消失的原因及解决方法

问题

在 JavaScript 中，当我们为图像元素添加拖放功能时，图像可能会消失。这是因为在添加事件监听器时，this 指向的是 window 对象，而不是图像元素本身。

解决方法

为了解决这个问题，我们可以通过以下方式修复 this 指向：

1. 箭头函数

tile.addEventListener("dragstart", (event) => {
  // `this` now refers to the image element
});

2. 绑定事件处理程序

tile.addEventListener("dragstart", this.dragStart.bind(this));

dragStart() {
  // `this` now refers to the image element
}

优化代码

为了优化代码，我们可以将事件处理程序定义在 PuzzleGame 类外部，并通过箭头函数来绑定 this：

const dragStart = (event) => {
  this.currTile = event.target; // Image being dragged
};

const dragOver = (event) => {
  event.preventDefault();
};

// ... other event handlers

PuzzleGame.prototype.populateBoard = function() {
  // ...

  tile.addEventListener("dragstart", dragStart);
  tile.addEventListener("dragover", dragOver);
  // ... other event listeners

  // ...
};

完整示例

class PuzzleGame extends Game {
  // ...

  populateBoard() {
    for (let r = 0; r < this.rows; r++) {
      for (let c = 0; c < this.columns; c++) {
        let tile = document.createElement("img");
        tile.id = r.toString() + "-" + c.toString();
        tile.src = "./images/" + this.randomOrder.shift() + ".png";

        // Add event listeners using arrow functions
        tile.addEventListener("dragstart", (event) => {
          this.currTile = event.target; // Image being dragged
        });
        tile.addEventListener("dragover", (event) => {
          event.preventDefault();
        });
        // ... other event handlers

        document.getElementById("board").append(tile);
      }
    }
  }

  // ...
}