Question

我不确定这里有什么问题，但是在chrome和firefox中测试，我发现我在javascript中从一个元素中删除一个EventListener时做错了。 / p>

上下文是一个画布游戏。首先，会显示一个启动画面，您可以在其中单击以开始游戏。点击开始后，我想删除监听器。

主要关注点是startGame函数中的removeEventListener。它不会抛出错误。代码执行（我在控制台中看到游戏启动消息，我可以看到＆＃34;这个＆＃34;是游戏实例）。我完全困惑为什么如果我继续点击画布每次运行startGame。预期的行为是，一旦删除了EventListener，点击那里就什么都不做。

帮助！

function Game(canvas) {
  this.c = canvas;
  this.ctx = this.c.getContext("2d");
  this.c.width = CANVAS_WIDTH;
  this.c.height = CANVAS_HEIGHT;

  // Background image
  this.bgReady = false;
  this.bgImage = new Image();
  this.bgImage.onload = function () {
    window.g.bgReady = true;
  };
  this.bgImage.src = MAIN_BACKGROUND;
}


Game.prototype.setSplash = function() {
  if (this.bgReady) {
    this.ctx.drawImage(window.g.bgImage, 0, 0);
    this.ctx.font="48px Helvetica";
    this.ctx.textAlign = "center";
    this.ctx.fillStyle="rgb(0,0,255)";
    this.ctx.fillText("Click To Start",310,240);
    document.getElementById("cnvs").addEventListener(
      'click',this.startGame.bind(this),true);
  } else {
    // since setSplash is an early function
    // wait a bit for the background image and then try again
    setTimeout(this.setSplash.bind(this),100);
    console.log("bgImage not ready...");
  }
}

Game.prototype.startGame = function() {
  console.log("game starting ...");
  console.log(this);

  // step 1, remove the click listener for this function

  // why isn't this working?!
  document.getElementById("cnvs").removeEventListener(
    'click',this.startGame,true);
}
...
// other stuff ...
function initialize() {
  // Get the canvas
  var c = document.getElementById("cnvs");

  // Create a game object
  window.g = new Game(c);

  // Set the splash page
  g.setSplash();
}
window.onload=initialize;

更多信息：

我还有一个版本，其中非工作删除被写为：

this.c.removeEventListener('click',this.startGame,true);

与上面引用的代码相同。

编辑：回复mczepiel的第一个答案

我试图像这样实施你的答案：

Typer.prototype.setSplash = function() {
  if (this.bgReady) {
    this.ctx.drawImage(window.t.bgImage, 0, 0);
    this.ctx.font="48px Helvetica";
    this.ctx.textAlign = "center";
    this.ctx.fillStyle="rgb(0,0,255)";
    this.ctx.fillText("Click To Start",310,240);
    var boundFunction = this.startGame.bind(this);
    document.getElementById("cnvs").addEventListener(
      'click',boundFunction,true,boundFunction);
  } else {
    // since setSplash is an early function 
    // wait a bit for the background image and then try again 
    setTimeout(this.setSplash.bind(this),100);
    console.log("bgImage not ready...");
  }
}

Typer.prototype.startGame = function(boundFunction) {
  console.log("game starting ...");
  console.log(this);  // strangely, now this is an Object rather 
                      // than Game, it still has the properties of 
                      // Game tho

  // step 1, remove the click listener for this function

  // still isn't working... 
  document.getElementById("cnvs").removeEventListener(
    'click',boundFunction,true);
}

我想我理解你的建议，但也许不是。上面的代码仍然没有删除监听器。任何帮助表示赞赏。

Answer 1

您需要存储对调用this.startGame.bind(this)的结果的引用，并将相同的值传递给addEventListener和removeEventListener

remove调用期望删除作为侦听器添加的完全相同的对象。

如果您希望以各种方式查看相同的问题，可能会复制removeEventListener is not working和其他人。

编辑未经测试的袖手旁观的建议：

Typer.prototype.setSplash = function() {
  if (this.bgReady) {
    // draw stuff

    var canvasElement = document.getElementById("cnvs");
    var dismissSplash = function (evt) {
        canvasElement.removeEventListener('click', dismissSplash, true);
        this.startGame();
    }.bind(this);

    canvasElement.addEventListener('click', dismissSplash, true);
  } else {
        // try to show splash later
    }
}

Typer.prototype.startGame = function() {
    // start game
}

为什么不删除EventListener工作？

1 个答案: