构建井字游戏时发生 removeEventListener 错误

Question

我正在尝试制作井字游戏。我曾尝试removeEventListener在正方形中出现圆圈或 X 后删除点击，这样图像就不会出现两次。但是removeEventListener导致错误：

未捕获的类型错误：无法在“EventTarget”上执行“removeEventListener”：作为参数 2 提供的回调不是对象。

有什么方法可以解决这个错误吗？得到你的帮助总是我的荣幸。

 var canvas = document.getElementById("canvas");

 const ctx = canvas.getContext('2d');

  var turn = 0;

  var maru_1 = maru_1()

function maru_1(){

 ctx.fillStyle = "skyblue",

 ctx.fillRect(5, 5, 150, 150)

}

var maru_2 = maru_2()

function maru_2(){

ctx.fillStyle = "skyblue",

ctx.fillRect(170, 5, 150, 150);

}

var maru_3 = maru_3()

function maru_3(){

 ctx.fillStyle = "skyblue";

 ctx.fillRect(335, 5, 150, 150);

 }

 var maru_4 = maru_4()

function maru_4(){

 ctx.fillStyle = "skyblue";

 ctx.fillRect(5, 170, 150, 150);

}

 var maru_5 = maru_5()

   function maru_5(){

  ctx.fillStyle = "skyblue";

  ctx.fillRect(170, 170, 150, 150);

   }

  var maru_6 = maru_6()

 function maru_6(){

  ctx.fillStyle = "skyblue";

  ctx.fillRect(335, 170, 150, 150);

 }

 var maru_7 = maru_7()

function maru_7(){

  ctx.fillStyle = "skyblue";

  ctx.fillRect(5, 335, 150, 150);

}

 var maru_8 = maru_8()

function maru_8(){

 ctx.fillStyle = "skyblue";

 ctx.fillRect(170, 335, 150, 150);

}

 var maru_9 = maru_9()

function maru_9(){

  ctx.fillStyle = "skyblue";

  ctx.fillRect(335, 335, 150, 150);

  }

Answer 1

removeEventListener()函数需要三个参数。第一个是type事件，第二个是EventListener最初注册的函数，第三个是可选options对象。target.removeEventListener(type, listenerFunction, options)您在示例中作为第二个参数传递的不是原始回调函数。为了删除事件侦听器，您必须使用命名函数作为回调。所以player事先定义你的功能function player(){ .... }并用它来注册事件监听器canvas.addEventListener('click', player )然后删除这个canvas.removeEventListener("click",player)

Answer 2

这是因为在回调中你传递的是 var player 而不是 player 函数，你可以更改变量的名称var canvas = document.getElementById("canvas");&nbsp;const ctx = canvas.getContext('2d');&nbsp; var turn = 0;&nbsp; var maru_1 = maru_1()function maru_1(){&nbsp;ctx.fillStyle = "skyblue",&nbsp;ctx.fillRect(5, 5, 150, 150)}var maru_2 = maru_2()function maru_2(){ctx.fillStyle = "skyblue",ctx.fillRect(170, 5, 150, 150);}var maru_3 = maru_3()function maru_3(){&nbsp;ctx.fillStyle = "skyblue";&nbsp;ctx.fillRect(335, 5, 150, 150);&nbsp;}&nbsp;var maru_4 = maru_4()function maru_4(){&nbsp;ctx.fillStyle = "skyblue";&nbsp;ctx.fillRect(5, 170, 150, 150);}&nbsp;var maru_5 = maru_5()&nbsp; &nbsp;function maru_5(){&nbsp; ctx.fillStyle = "skyblue";&nbsp; ctx.fillRect(170, 170, 150, 150);&nbsp; &nbsp;}&nbsp; var maru_6 = maru_6()&nbsp;function maru_6(){&nbsp; ctx.fillStyle = "skyblue";&nbsp; ctx.fillRect(335, 170, 150, 150);&nbsp;}&nbsp;var maru_7 = maru_7()function maru_7(){&nbsp; ctx.fillStyle = "skyblue";&nbsp; ctx.fillRect(5, 335, 150, 150);}&nbsp;var maru_8 = maru_8()function maru_8(){&nbsp;ctx.fillStyle = "skyblue";&nbsp;ctx.fillRect(170, 335, 150, 150);}&nbsp;var maru_9 = maru_9()function maru_9(){&nbsp; ctx.fillStyle = "skyblue";&nbsp; ctx.fillRect(335, 335, 150, 150);&nbsp; }var img = new Image();img.src = "maru.png";var img_2 = new Image();img_2.src = "batsu.png";function player(){&nbsp; var x = event.screenX;&nbsp; var y = event.screenY;&nbsp;&nbsp; var imgTemp;if(turn%2==0){&nbsp;imgTemp = img} else {&nbsp;imgTemp = img_2}&nbsp; if(x<150 && y<190){&nbsp; &nbsp; ctx.drawImage(imgTemp, 5, 5, 145, 140)&nbsp; &nbsp; &nbsp;turn+=1;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; return true;&nbsp; }else if(x>160 && x<335 && y<190){&nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 168, 5, 145, 140)&nbsp; &nbsp; &nbsp; turn+=1;&nbsp; &nbsp; &nbsp; return true;&nbsp; }else if(x>335 && x<470 && y<190){&nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 330, 5, 145, 140)&nbsp; &nbsp; &nbsp; turn+=1;&nbsp; &nbsp; &nbsp; return true;&nbsp; }else if(x<160 && y>=175 && y<340){&nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 5, 170, 145, 140)&nbsp; &nbsp; &nbsp; turn+=1;&nbsp; &nbsp; &nbsp; return true;&nbsp; }else if(x>170 && x<335 && y>175 && y<340){&nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 170, 170, 145, 140)&nbsp; &nbsp; &nbsp; turn+=1;&nbsp; &nbsp; &nbsp; return true;&nbsp; }else if(x>335 &&&nbsp; x<470 && y>195 && y<340){&nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 335, 170, 145, 140)&nbsp; &nbsp; &nbsp; turn+=1;&nbsp; &nbsp; &nbsp; return true;&nbsp; }else if(x<160 && y>340 && y<550){&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;ctx.drawImage(imgTemp, 5, 335, 145, 140)&nbsp; &nbsp; &nbsp; &nbsp;turn+=1;&nbsp; &nbsp; &nbsp; &nbsp;return true;&nbsp; }else if(x>165 && x<335 && y>340 && y<550){&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 170, 335, 145, 140)&nbsp; &nbsp; &nbsp; &nbsp; turn+=1;&nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; }else if(x>335 && x<470 &&&nbsp; y>340 && y<550){&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 335, 335, 145, 140)&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; turn+=1;&nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; &nbsp; }{&nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; }&nbsp;var player2 = canvas.addEventListener('click', player,false)if (true){ // put your condition here&nbsp; &nbsp;canvas.removeEventListener("click",player);}<html><head></head><body><canvas id="canvas"></body></html>

Answer 3

问题 1：您的代码不可读问题 2：您正在重新分配boolean: true到ifplayer块内部，这导致.removeEventListener如果你只想添加一次点击监听器，那么你可以在你的播放器函数中删除监听器。我修改了你的代码，看看：var canvas = document.getElementById("canvas");const ctx = canvas.getContext('2d');var turn = 0;var img = new Image();img.src = "maru.png";var img_2 = new Image();img_2.src = "batsu.png";function fillRect(ctx, x, y, w, h) {&nbsp; &nbsp; ctx.fillStyle = "skyblue",&nbsp; &nbsp; ctx.fillRect(x, y, w, h)}function player(event) {&nbsp; &nbsp; if (player) {&nbsp; &nbsp; &nbsp; &nbsp; canvas.removeEventListener("click", player);&nbsp; &nbsp; }&nbsp; &nbsp; var x = event.screenX;&nbsp; &nbsp; var y = event.screenY;&nbsp; &nbsp; var imgTemp;&nbsp; &nbsp; if (turn % 2 == 0) {&nbsp; &nbsp; &nbsp; &nbsp; imgTemp = img&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; imgTemp = img_2&nbsp; &nbsp; }&nbsp; &nbsp; if (x < 150 && y < 190) {&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 5, 5, 145, 140)&nbsp; &nbsp; &nbsp; &nbsp; turn += 1;&nbsp; &nbsp; } else if (x > 160 && x < 335 && y < 190) {&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 168, 5, 145, 140)&nbsp; &nbsp; &nbsp; &nbsp; turn += 1;&nbsp; &nbsp; } else if (x > 335 && x < 470 && y < 190) {&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 330, 5, 145, 140)&nbsp; &nbsp; &nbsp; &nbsp; turn += 1;&nbsp; &nbsp; } else if (x < 160 && y >= 175 && y < 340) {&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 5, 170, 145, 140)&nbsp; &nbsp; &nbsp; &nbsp; turn += 1;&nbsp; &nbsp; } else if (x > 170 && x < 335 && y > 175 && y < 340) {&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 170, 170, 145, 140)&nbsp; &nbsp; &nbsp; &nbsp; turn += 1;&nbsp; &nbsp; } else if (x > 335 && x < 470 && y > 195 && y < 340) {&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 335, 170, 145, 140)&nbsp; &nbsp; &nbsp; &nbsp; turn += 1;&nbsp; &nbsp; } else if (x < 160 && y > 340 && y < 550) {&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 5, 335, 145, 140)&nbsp; &nbsp; &nbsp; &nbsp; turn += 1;&nbsp; &nbsp; } else if (x > 165 && x < 335 && y > 340 && y < 550) {&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 170, 335, 145, 140)&nbsp; &nbsp; &nbsp; &nbsp; turn += 1;&nbsp; &nbsp; } else if (x > 335 && x < 470 && y > 340 && y < 550) {&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(imgTemp, 335, 335, 145, 140)&nbsp; &nbsp; &nbsp; &nbsp; turn += 1;&nbsp; &nbsp; }}fillRect(ctx, 5, 5, 150, 150);fillRect(ctx, 170, 5, 150, 150);fillRect(ctx, 335, 5, 150, 150);fillRect(ctx, 5, 170, 150, 150);fillRect(ctx, 170, 170, 150, 150);fillRect(ctx, 335, 170, 150, 150);fillRect(ctx, 5, 335, 150, 150);fillRect(ctx, 170, 335, 150, 150);fillRect(ctx, 335, 335, 150, 150);canvas.addEventListener('click', player);