构建井字游戏时发生 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");

 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);

  }

var img = new Image();

img.src = "maru.png";

var img_2 = new Image();

img_2.src = "batsu.png";

function player(){

  var x = event.screenX;

  var y = event.screenY; 

  var imgTemp;

if(turn%2==0){

 imgTemp = img

} else {

 imgTemp = img_2

}

  if(x<150 && y<190){

    ctx.drawImage(imgTemp, 5, 5, 145, 140)

     turn+=1;    

      return true;

  }else if(x>160 && x<335 && y<190){

      ctx.drawImage(imgTemp, 168, 5, 145, 140)

      turn+=1;

      return true;

  }else if(x>335 && x<470 && y<190){

      ctx.drawImage(imgTemp, 330, 5, 145, 140)

      turn+=1;

      return true;

  }else if(x<160 && y>=175 && y<340){

      ctx.drawImage(imgTemp, 5, 170, 145, 140)

      turn+=1;

      return true;

  }else if(x>170 && x<335 && y>175 && y<340){

      ctx.drawImage(imgTemp, 170, 170, 145, 140)

      turn+=1;

      return true;

  }else if(x>335 &&  x<470 && y>195 && y<340){

      ctx.drawImage(imgTemp, 335, 170, 145, 140)

      turn+=1;

      return true;

  }else if(x<160 && y>340 && y<550){ 

       ctx.drawImage(imgTemp, 5, 335, 145, 140)

       turn+=1;

       return true;

  }else if(x>165 && x<335 && y>340 && y<550){

        ctx.drawImage(imgTemp, 170, 335, 145, 140)

        turn+=1;

        return true;

    }else if(x>335 && x<470 &&  y>340 && y<550){

        ctx.drawImage(imgTemp, 335, 335, 145, 140) 

        turn+=1;

        return true;

        }{

        return false;  

     }

    }

 var player2 = canvas.addEventListener('click', player,false)

if (true){ // put your condition here

   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) {

    ctx.fillStyle = "skyblue",

    ctx.fillRect(x, y, w, h)

}

function player(event) {

    if (player) {

        canvas.removeEventListener("click", player);

    }

    var x = event.screenX;

    var y = event.screenY;

    var imgTemp;

    if (turn % 2 == 0) {

        imgTemp = img

    } else {

        imgTemp = img_2

    }

    if (x < 150 && y < 190) {

        ctx.drawImage(imgTemp, 5, 5, 145, 140)

        turn += 1;

    } else if (x > 160 && x < 335 && y < 190) {

        ctx.drawImage(imgTemp, 168, 5, 145, 140)

        turn += 1;

    } else if (x > 335 && x < 470 && y < 190) {

        ctx.drawImage(imgTemp, 330, 5, 145, 140)

        turn += 1;

    } else if (x < 160 && y >= 175 && y < 340) {

        ctx.drawImage(imgTemp, 5, 170, 145, 140)

        turn += 1;

    } else if (x > 170 && x < 335 && y > 175 && y < 340) {

        ctx.drawImage(imgTemp, 170, 170, 145, 140)

        turn += 1;

    } else if (x > 335 && x < 470 && y > 195 && y < 340) {

        ctx.drawImage(imgTemp, 335, 170, 145, 140)

        turn += 1;

    } else if (x < 160 && y > 340 && y < 550) {

        ctx.drawImage(imgTemp, 5, 335, 145, 140)

        turn += 1;

    } else if (x > 165 && x < 335 && y > 340 && y < 550) {

        ctx.drawImage(imgTemp, 170, 335, 145, 140)

        turn += 1;

    } else if (x > 335 && x < 470 && y > 340 && y < 550) {

        ctx.drawImage(imgTemp, 335, 335, 145, 140)

        turn += 1;

    }

}

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);