如何在for循环中禁用/移除addEventListener？解决井字棋点击问题

核心问题是缺少全局的游戏结束状态标记，导致点击事件在胜负已分后仍会执行。下面是具体修改方案：

修改要点： #

• 新增全局变量isGameOver，初始值为false，用来追踪游戏是否结束
• 在每个格子的点击事件开头，先判断isGameOver，如果为true直接终止函数执行
• 改造checkWin函数，在判定出胜负或平局时，将isGameOver设为true
• 修复checkWin里的一处笔误（最后一行判断O获胜的条件里误写为X）

修改后的完整代码： #

const player1 = "X";
const player2 = "O";
let winnerAnnounce = document.querySelector("#print");

let gameDraws = [0, 0, 0, 0, 0, 0, 0, 0, 0];
let clicks = 0;
let isGameOver = false; // 新增游戏结束标记

const inputs = document.querySelectorAll("input");
let turn = 0;

for (let input of inputs){
    input.addEventListener('click', (evt) =>{
        // 游戏结束直接返回，不执行后续逻辑
        if (isGameOver) return;
        
        const id = evt.target.id;
        const box = evt.target;
        if (turn % 2 === 0){
            console.log(player1 + " " + id[1] );
            gameDraws = checkBoxes(evt, gameDraws, player1, id, box);
        } else {
            console.log(player2 + " " + id[1] );
            gameDraws = checkBoxes(evt, gameDraws, player2, id, box);
        }
        checkWin(gameDraws);
        turn++;
    })
};

function checkBoxes (evt, gameDraws, player, id, box){
    if (gameDraws[id[1]-1] === 0){
        gameDraws[id[1]-1]= player; 
        box.value = player;
        clicks++;
    } else if (gameDraws[id[1]-1]==="X" || gameDraws[id[1]-1] === "O") {
        turn--;
    }
    console.log(gameDraws);
    return gameDraws;
};

function checkWin(gameDraws){
    // 横向判断
    for (let i = 0;i <= 6;i = i + 3){
       if (gameDraws[i] === "X" && gameDraws[i + 1]==="X" && gameDraws[i + 2] === "X"){
        winnerAnnounce.textContent = player1 + " won!";
        isGameOver = true;
        return; // 找到胜负直接返回，避免重复判断
       } else if (gameDraws[i] === "O" && gameDraws[i + 1]==="O" && gameDraws[i + 2] === "O"){
        winnerAnnounce.textContent = player2 + " won!";
        isGameOver = true;
        return;
       }
    };
    // 纵向判断
    for (let i = 0; i <= 2; i++){
        if(gameDraws[i] === "X" && gameDraws[i + 3]==="X" && gameDraws[i + 6] === "X"){
            winnerAnnounce.textContent = player1 + " won!";
            isGameOver = true;
            return;
        } else if (gameDraws[i] === "O" && gameDraws[i + 3]==="O" && gameDraws[i + 6] === "O"){
            winnerAnnounce.textContent = player2 + " won!";
            isGameOver = true;
            return;
        }
    };
    // 左对角线判断
    if (gameDraws[0]==="X" && gameDraws[4] === "X" && gameDraws[8] === "X"){
        winnerAnnounce.textContent = player1 + " won!";
        isGameOver = true;
        return;
    } else if (gameDraws[0]==="O" && gameDraws[4] === "O" && gameDraws[8] === "O"){
        winnerAnnounce.textContent = player2 + " won!";
        isGameOver = true;
        return;
    } 
    // 右对角线判断（修复原代码的笔误）
    if(gameDraws[2] === "X" && gameDraws[4] === "X" && gameDraws[6] === "X"){
        winnerAnnounce.textContent = player1 + " won!";
        isGameOver = true;
        return;
    } else if (gameDraws[2] === "O" && gameDraws[4] === "O" && gameDraws[6] === "O"){
        winnerAnnounce.textContent = player2 + " won!";
        isGameOver = true;
        return;
    }
    // 平局判断
    if (clicks >= 9){
        winnerAnnounce.textContent = "It's a tie!";
        isGameOver = true;
    }
}

const reset = document.querySelector("#but");

reset.addEventListener('click', () => {
    window.location.reload();
})

内容的提问来源于stack exchange，提问作者Lovisa