Question

我想检查我点击的div是否有一个名为“mole”的类。当为所有名为“cell”的类添加click addEventLister时，我添加了一个带有属性事件的回调。

Game.prototype.checkClicks = function(e) {
  console.log(e);
  if (e.classList.contains("mole")) {
    new Audio(self.baseUrl + self.audio[0]).play();
    self.score++;
    self.displayScore();
  } else {
    new Audio(self.baseUrl + self.audio[1]).play();
  }
};

const myAudio = document.createElement("audio");
myAudio.setAttribute("src", "./sounds/el_jarabe_tapatio.m4a");
myAudio.loop = true;

$(document).ready(function() {
  const moleGame = new Game();
  moleGame.startGame();
  const allCells = document.getElementsByClassName("cell");
  for (let i = 0; i < allCells.length; i++) {
    allCells[i].addEventListener("click", moleGame.checkClicks(event));
  }
});

我收到以下错误：

Uncaught TypeError: Cannot read property 'classList' of undefined
    at Game.checkClicks (main.js:110)
    at HTMLDocument.<anonymous> (main.js:128)
    at j (jquery-3.2.1.min.js:2)
    at k (jquery-3.2.1.min.js:2)

表示，“e”事件未定义..我理解点击事件未在加载时定义，但仅在我点击div时，但我该如何解决？

Answer 1

您正在立即调用checkClicks，而不是传递事件发生时将被调用的函数。

此外，您希望classList对象上有event，而不会出现self。

最后，您正在使用game，显然希望它将引用currentTarget对象。

而是将函数作为处理程序传递，使用event对象的this属性，并使用self代替Game.prototype.checkClicks = function(e) { console.log(e); if (e.currentTarget.classList.contains("mole")) { new Audio(this.baseUrl + this.audio[0]).play(); this.score++; this.displayScore(); } else { new Audio(this.baseUrl + this.audio[1]).play(); } }; const myAudio = document.createElement("audio"); myAudio.setAttribute("src", "./sounds/el_jarabe_tapatio.m4a"); myAudio.loop = true; $(document).ready(function() { const moleGame = new Game(); moleGame.startGame(); const allCells = document.getElementsByClassName("cell"); for (let i = 0; i < allCells.length; i++) { allCells[i].addEventListener("click", event => moleGame.checkClicks(event)); } });。

{{1}}

Answer 2

您正在立即调用处理程序，而不是稍后传递处理程序以供执行（事件发生时）。所以删除括号。将使用事件对象作为参数进行调用：

allCells[i].addEventListener("click", moleGame.checkClicks);

如果您的checkClicks方法依赖于this moleGame（似乎不是这种情况），请执行以下操作：

allCells[i].addEventListener("click", moleGame.checkClicks.bind(moleGame));

请注意，虽然这将定义e，但事件对象没有classList属性。您可能打算e.target.classList。

在为文档准备好的所有类添加addEventListeners时，如何处理事件单击回调？

2 个答案: