在Phaser中使用DOM选择器时无法访问this.gameState的解决方法

问题核心是普通事件回调函数的this指向偏差：当用普通函数作为addEventListener的回调时，触发事件后this会自动指向触发事件的DOM元素（也就是你的#grassBtn按钮），而非你期望的包含gameState的上下文，所以this.gameState自然无法访问。

下面是三种可行的解决方法：

• 使用箭头函数
  箭头函数不会绑定自身的this，会继承外层作用域的this，直接就能访问到gameState：

  document.querySelector("#grassBtn").addEventListener("click", () => {
      this.gameState.selectedBlock = 1;
      console.log(this.gameState.selectedBlock);
  });
  

• 提前保存外层上下文
  在添加事件监听前，把外层的this存到变量里，回调函数里用这个变量访问gameState：

  const ctx = this;
  document.querySelector("#grassBtn").addEventListener("click", function () {
      ctx.gameState.selectedBlock = 1;
      console.log(ctx.gameState.selectedBlock);
  });
  

• 用bind绑定this
  把回调函数的this手动绑定到外层上下文：

  function setGrassBlock() {
      this.gameState.selectedBlock = 1;
      console.log(this.gameState.selectedBlock);
  }
  document.querySelector("#grassBtn").addEventListener("click", setGrassBlock.bind(this));
  

注意：你之前在addEventListener里传的第三个参数this，在现代浏览器中是用来控制事件的捕获/冒泡阶段的，并非用来绑定回调函数的this，所以这个写法无法解决问题。

内容的提问来源于stack exchange，提问作者Vatsa Pandey