暂时禁用方块的点击事件监听器（颜色选择器游戏）

Question

我正在开展RGB颜色选择器游戏。 游戏生成6颜色方块的随机网格，并从这6个颜色方块中选择一个随机RGB颜色，如果玩家从网格中选择正确选取的RGB颜色，所有6方块都变成了这种颜色，他赢了圆形，但如果他从网格中选择任何不正确的颜色，颜色就会隐藏。隐藏它的逻辑我只是将颜色变为与背景颜色相同。

我添加到每个方格的网格点击事件监听器。我的问题，我希望这个事件监听器在每轮游戏中只工作1次，所以如果玩家选择错误的颜色，颜色方块隐藏并且点击事件监听器被禁用如果他点击正确的颜色点击事件监听器应该被禁用，那么暂时也是一样的。

如果还有其他好方法可以隐藏错误选择的方形颜色，请提及。

游戏界面如下：

此问题的代码块：

var colors = generateRandomColors(6);

var squares = document.querySelectorAll(".square");
var pickedColor = pickColor();
var colorDisplay = document.getElementById("colorDisplay");
var messageDisplay = document.querySelector("#message");
var h1 = document.getElementsByTagName("h1")[0];
var resetBtn = document.getElementById("reset");

colorDisplay.textContent = pickedColor;

// add click listener to new colors button
resetBtn.addEventListener("click",function(){
       reset();
});

for (var i = 0; i < squares.length; i++) {
    // add intial colors to squares
     squares[i].style.backgroundColor = colors[i];  
    // add click listeners to squares
    squares[i].addEventListener("click",function(){
        // grab color of clicked square
        var clickedColor = this.style.backgroundColor;
        // compare color to pickedColor
        if(clickedColor === pickedColor){
            changeColors(clickedColor);
            h1.style.backgroundColor = clickedColor;
            resetBtn.textContent = "Play Again";
            messageDisplay.textContent = "Correct!";
        }
        else{
            this.style.backgroundColor = "#232323";
            messageDisplay.textContent = "Try Again!";
        }
    });
}

任何建议的帮助将不胜感激。

Answer 1

在搜索我的问题的解决方案后，在Alon Eitan的帮助下，我找到了一种方法，在触发它之后只为方形工作制作一次点击事件监听器。我只需要为{添加另一个参数{1}} addEventListener()所以它按预期工作。

我发现另一种方法是在点击错误的颜色方块后隐藏正方形而不改变它在界面上的位置：

{once:true}

代码解决方案：

squares[i].style.visibility = "hidden"; 

有些评论建议使用 squares[i].addEventListener("click",function(){ // grab color of clicked square var clickedColor = this.style.backgroundColor; // compare color to pickedColor if(clickedColor === pickedColor){ changeColors(clickedColor); h1.style.backgroundColor = clickedColor; resetBtn.textContent = "Play Again"; messageDisplay.textContent = "Correct!"; } else{ // another way to hide the square this.style.visibility = "hidden"; //this.style.backgroundColor = "#232323"; messageDisplay.textContent = "Try Again!"; } },{once: true}); 来禁用方形点击事件，但在我的情况下效率很低，因为我在removeEventListener()上为每个广场使用匿名函数。

W3Schools 在这个案例中提到注意：

  

要删除事件处理程序，请使用指定的函数   addEventListener()方法必须是外部函数。

     

匿名函数，例如＆＃34; addEventListener()＆＃34;不行。