Question

我正在尝试在我的网站上制作一个基本游戏，其中涉及到你试图通过点击它们来防止水母图片到达页面顶部以使它们消失。当我试图在水母中产生这种游戏时，它会立即删除自己。令我更困惑的是，javascript控制台会在记录添加事件处理程序之前记录该元素已被删除。一旦我设置了该属性，水母元素是否会以某种方式调用delete事件？为了在页面上产生水母，我点击一个元素，但如果这有用的话，水母会在这个元素附近产生。 playfield父级是在一个单独的html文件中。

/*Code with the problem*/
var deleteJelly = function(jelly) {
var parent = document.getElementById("playingField");
var child = jelly;
parent.removeChild(child);
console.log("Jellyfish removed!")};

var spawnJelly = function(jellyType) {
    jelliesSpawned++
    var newJelly = document.createElement("img");
    newJelly.setAttribute('src', "https://www.googledrive.com/host/0B-IaOP2CvHbffk56ZWFrUExfX1ZVNWZ0RmRmYU0tMHVoUHVDZzJ1NzhRV2l0c01kSENnNWc/jelly"+jellyType+".png");
    document.getElementById("playingField").appendChild(newJelly);
     newJelly.addEventListener("click", deleteJelly(newJelly));
    console.log("added event listener")
};
/*Rest of code works fine*/

Answer 1

你已经堕落了经典的“调用函数而不是传递函数”错误。

 newJelly.addEventListener("click", deleteJelly(newJelly)); // call function

vs

 newJelly.addEventListener("click", function(){deleteJelly(newJelly);}); // pass function

由于你已经调用了函数，它会被立即删除，所以它完成了它应该做的事情：删除。

如果您传入一个调用delete的匿名函数，则在调用匿名函数之前不会调用delete - 这就是您希望它发生的时间。

Answer 2

没有必要传递 jelly ，因为调用侦听器的元素是函数中的 this 。您可以利用它将其简化为：

function deleteJelly() {
  this.parentNode.removeChild(this);
  console.log("Jellyfish removed!")
}

并设置监听器：

newJelly.addEventListener("click", deleteJelly);

这是全面的代码。 ; - ）

元素一旦删除就自行删除

2 个答案: