javascript - 在第一个事件监听器单击执行后退出 for 循环

Question

我正在开发一个井字棋盘，我希望用户能够点击棋盘上九个框之一。我实现了一个 for 循环 来遍历每个 div，允许用户点击每个 div。

在他们选中自己的盒子后，计算机就会开始移动。

一旦用户选择了他们的框，我该如何停止循环？提前谢谢你

//initial variables
let box = document.querySelectorAll(".box");
let letter = document.querySelector('.letter');
let turn = 0;
//START GAME
let userXorO = function() { //function to determine whose x and o

  let X = 1;
  let O = 2;
  
  let random = Math.floor(Math.random() * 2) + 1; //randomizes between x and o
  
      if (random == X) { 
        return 'X'
      }

      if (random == O) {
        return 'O'
      }
    
    return random; //returns random number to function
  }

//PLAYER ONE INITIAL TURN
function turn_one() {


  for (let i = 0; i < box.length; i++) {
    if (turn === 0) {
      box[i].addEventListener("click", function(e) {
        box[i].textContent = userXorO(); //draws first user X or O 
        turn ++;
      });
      
    }
  }
}

turn_one();

.game-board {
  width: 600px;
  height: 600px;
  margin: 0 auto;
  background-color: #34495e;
  color: #fff;
  border: 6px solid #2c3e50;
  border-radius: 10px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.box {
  border: 6px solid #2c3e50;
  border-radius: 2px;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.player_one {
  background-color: red;
}

<div class="game-board">
  <div id="1" class="box"><span id="1" class="letter"></span></div>
  <div id="2" class="box"><span id="2" class="letter"></span></div>
  <div class="box"><span id="3" class="letter"></span></div>
  <div class="box"><span id="" class="letter"></span></div>
  <div class="box"><span id="" class="letter"></span></div>
  <div class="box"><span id="" class="letter"></span></div>
  <div class="box"><span id="" class="letter"></span></div>
  <div class="box"><span id="" class="letter"></span></div>
  <div class="box"><span id="" class="letter"></span></div>
</div>

Answer 1

与其添加很多您可能会在用户第一次选择一个框后尝试删除的监听器，您可能会发现如果您只添加一个个监听器到整个逻辑更容易遵循容器(这称为 事件委托(delegate))，并使用 isHumanTurn 等变量检查点击当前是否有效。 (当然，如果计算机立即轮到它，则不需要 isHumanTurn 检查。)

另请注意，同一文档中的重复 ID 是无效 HTML - 最好将其删除。 (要检查其容器中被点击的 div 的索引，您可以在 div 的数组上使用 indexOf)

另一个问题是你应该在游戏开始时构造随机的 X 或 O 一次，而不是在每次点击时，否则它不会是一致的。

例如:

const humanTile = ['X', 'O'][Math.floor(Math.random() * 2)];

let isHumanTurn = true;
function handleClick({ target }) {
  if (!target.matches('.box')) return;
  if (!isHumanTurn) return console.log('It is not your turn!');
  target.textContent = humanTile; //draws first user X or O
  isHumanTurn = false;
  console.log('insert function call for computer to take its turn...');
}
document.querySelector('.game-board').addEventListener('click', handleClick);

.game-board {
  width: 600px;
  height: 600px;
  margin: 0 auto;
  background-color: #34495e;
  color: #fff;
  border: 6px solid #2c3e50;
  border-radius: 10px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
}

.box {
  border: 6px solid #2c3e50;
  border-radius: 2px;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.player_one {
  background-color: red;
}

<div class="game-board">
  <div class="box"><span class="letter"></span></div>
  <div class="box"><span class="letter"></span></div>
  <div class="box"><span class="letter"></span></div>
  <div class="box"><span class="letter"></span></div>
  <div class="box"><span class="letter"></span></div>
  <div class="box"><span class="letter"></span></div>
  <div class="box"><span class="letter"></span></div>
  <div class="box"><span class="letter"></span></div>
  <div class="box"><span class="letter"></span></div>
</div>