亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

構建井字游戲時發生 removeEventListener 錯誤

構建井字游戲時發生 removeEventListener 錯誤

陪伴而非守候 2022-12-09 13:55:35
我正在嘗試制作井字游戲。我曾嘗試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);  }
查看完整描述

3 回答

?
慕姐4208626

TA貢獻1852條經驗 獲得超7個贊

removeEventListener()函數需要三個參數。第一個是type事件，第二個是EventListener最初注冊的函數，第三個是可選options對象。

target.removeEventListener(type, listenerFunction, options)

您在示例中作為第二個參數傳遞的不是原始回調函數。為了刪除事件偵聽器，您必須使用命名函數作為回調。

所以player事先定義你的功能

function player(){ .... }

并用它來注冊事件監聽器

canvas.addEventListener('click', player )

然后刪除這個

canvas.removeEventListener("click",player)


查看完整回答
反對 回復 2022-12-09
?
子衿沉夜

TA貢獻1828條經驗 獲得超3個贊

這是因為在回調中你傳遞的是 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>


查看完整回答
反對 回復 2022-12-09
?
FFIVE

TA貢獻1797條經驗 獲得超6個贊

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



查看完整回答
反對 回復 2022-12-09
  • 3 回答
  • 0 關注
  • 174 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號