如何删除在箭头函数中创建的事件处理程序，以便当达到游戏的分数限制时，按钮停止工作

Question

就像标题所说，我想让按钮停止添加分数和更新页面上的玩家/CPU 选择。但我似乎不知道如何发生这种情况。到目前为止我尝试过的所有方法都不起作用，按钮不断添加分数+更改页面上的选择。

我尝试通过谷歌搜索找到一种方法来删除 endGame() 函数中的事件侦听器。但我不确定我的语法是否错误，或者是否有完全不同的方式。

我尝试使用removeEventListener，并尝试禁用按钮，但这似乎不起作用。我遇到过创建处理程序来存储对相关函数的引用，但我不知道如何将其应用到我现有的代码中。 这是我的代码作为参考。

    button.addEventListener("click", () => {
        playerSelection = button.value;

        playGame();
    })
})









`
function compare(playerSelection, computerSelection) {
    if (playerSelection === computerSelection) { 
        
    }
    
    else if (playerSelection === "rock" && computerSelection === "scissors") {
        playerScore++;

        }
    else if (playerSelection === "paper" && computerSelection === "rock") {
        playerScore++;
        
    }
    else if (playerSelection == "scissors" && computerSelection === "paper") {
        playerScore++;

        
    }
    else {
        computerScore++;

    }
    playerScoreText = document.querySelector(".player-score").textContent = `Player score: ${playerScore}`;
    computerScoreText = document.querySelector(".cpu-score").textContent = `CPU score: ${computerScore}`;
    
}

function getComputerChoice() {
    return choice[Math.floor(Math.random() * choice.length)]
}`

function playGame() {
    let playerChoice = document.querySelector(".player-choice").textContent = `Player Chose: ${playerSelection}`
        
    let computerSelection = getComputerChoice();
    let cpuChoice = document.querySelector(".cpu-choice").textContent = `Computer Chose: ${computerSelection}`

    compare(playerSelection, computerSelection);
    endGame();
    
    

    
}

function endGame() {
    if (playerScore === maxScore) {
        console.log("you won")
    }
    else if (computerScore === maxScore) {
        console.log("you lost")
    }
    
}````

Answer 1

需要为

.removeEventListener() 提供相同的函数实例（以及

capture

选项的相同原始值）。只需将箭头函数分配给一个变量，然后使用该变量稍后删除侦听器。

    const buttonListener = () => {
        playerSelection = button.value;

        playGame();
    }

    button.addEventListener("click", buttonListener)

    function endGame() {
        button.removeEventListener("click", buttonListener)

        if (playerScore === maxScore) {
            console.log("you won")
        }
        else if (computerScore === maxScore) {
            console.log("you lost")
        }
    
    }