Javascript 执行第一个事件侦听器单击后退出for循环

我正在做一个tic-tac趾板，我希望用户能够点击板上九个框中的一个。我实现了一个

for循环

来运行每个div，允许用户单击每个div

在他们选择他们的盒子后，计算机将移动

一旦用户选择了框，我如何停止循环？先谢谢你

//初始变量
let box=document.queryselectoral（“.box”）；
let letter=document.querySelector（'.letter'）；
让转弯=0；
//开始比赛
让userXorO=function（）{//函数来确定谁的x和o
设X=1；
设O=2；
让random=Math.floor（Math.random（）*2）+1；//在x和o之间随机化
如果（random==X）{
返回“X”
}
如果（随机==O）{
返回“O”
}
return random；//向函数返回随机数
}
//球员第一回合
函数turn_one（）{
for（设i=0；i
。游戏板{
宽度：600px；
高度：600px；
保证金：0自动；
背景色：#34495e；
颜色：#fff；
边框：6px实心#2c3e50；
边界半径：10px；
显示：网格；
网格模板：重复（3，1fr）/重复（3，1fr）；
}
.盒子{
边框：6px实心#2c3e50；
边界半径：2px；
字体系列：Helvetica；
字体大小：粗体；
字号：4em；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
一号选手{
背景色：红色；
}
如果只在整个容器中添加一个侦听器（这称为事件委派），您可能会发现逻辑更容易遵循，而不是在用户第一次选择框后添加大量侦听器，并使用
isHumanTurn
等变量检查单击当前是否有效。（当然，如果计算机立即轮到它，就没有必要进行
isHumanTurn
检查。）

还要注意，同一文档中的重复ID是无效的HTML，最好删除这些ID。（要检查容器中单击的
div
的索引，可以在
div
s的数组上使用
indexOf
）

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

例如：


consthumantile=['X'，'O'][Math.floor（Math.random（）*2）]；
让非人性化=真实；
函数handleClick（{target}）{
如果（！target.matches（'.box'））返回；
if（！isHumanTurn）返回console.log（'不轮到你了！'）；
target.textContent=humanTile；//绘制第一个用户X或O
非人化=假；
log（'insert函数调用让计算机轮到它了…'）；
}
document.querySelector（“.game board”）.addEventListener（'click'，handleClick）
。游戏板{
宽度：600px；
高度：600px；
保证金：0自动；
背景色：#34495e；
颜色：#fff；
边框：6px实心#2c3e50；
边界半径：10px；
显示：网格；
网格模板：重复（3，1fr）/重复（3，1fr）；
}
.盒子{
边框：6px实心#2c3e50；
边界半径：2px；
字体系列：Helvetica；
字体大小：粗体；
字号：4em；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
一号选手{
背景色：红色；
}
如果只在整个容器中添加一个侦听器（这称为事件委派），您可能会发现逻辑更容易遵循，而不是在用户第一次选择框后添加大量侦听器，并使用
isHumanTurn
等变量检查单击当前是否有效。（当然，如果计算机立即轮到它，就没有必要进行
isHumanTurn
检查。）

还要注意，同一文档中的重复ID是无效的HTML，最好删除这些ID。（要检查容器中单击的
div
的索引，可以在
div
s的数组上使用
indexOf
）

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

例如：


consthumantile=['X'，'O'][Math.floor（Math.random（）*2）]；
让非人性化=真实；
函数handleClick（{target}）{
如果（！target.matches（'.box'））返回；
if（！isHumanTurn）返回console.log（'不轮到你了！'）；
target.textContent=humanTile；//绘制第一个用户X或O
非人化=假；
log（'insert函数调用让计算机轮到它了…'）；
}
document.querySelector（“.game board”）.addEventListener（'click'，handleClick）
。游戏板{
宽度：600px；
高度：600px；
保证金：0自动；
背景色：#34495e；
颜色：#fff；
边框：6px实心#2c3e50；
边界半径：10px；
显示：网格；
网格模板：重复（3，1fr）/重复（3，1fr）；
}
.盒子{
边框：6px实心#2c3e50；
边界半径：2px；
字体系列：Helvetica；
字体大小：粗体；
字号：4em；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
一号选手{
背景色：红色；
}

回答得很好！学到了很多，谢谢你花时间解释你所做的一切。非常欣赏的人想知道为什么要将handleClick函数设置为一个对象（{Target}），该对象分解参数并只提取其
Target
属性。它与
handleClick（event）{const{target}=event；
相同，只是没有中间变量
event
。好的，再次感谢您的帮助