事件监听器在javascript中只工作一次

Question

我想将事件监听器附加到两个网格中的每个单元，这样当我点击对手的网格时(轮到我了)，我就可以使用func()进行攻击，这也会翻转。当我的对手点击我的网格(轮到他们了)，他们用func()攻击我，然后转向我。这段代码的问题是事件侦听器似乎每个网格只附加一次。所以我可以攻击一次，我的对手可以攻击我一次，然后我就不能再攻击了。我怎么解决这个问题呢?

const cells = document.querySelectorAll("#enemyGrid .cell");
for (let i = 0; i < cells.length; i++) {
cells[i].addEventListener("click", () => {
if (turn === 0) {
//do stuff
func(); //sets turn=1
}
});
}
const cellsMe = document.querySelectorAll("#meGrid .cell");
for (let i = 0; i < cellsMe.length; i++) {
cellsMe[i].addEventListener("click", () => {
if (turn === 1) {
//do stuff
func(); //sets turn =0
}
});
}

Answer 1

这是一个非常简单的演示，试图实现您所期望的。

我保留了dom的结构，并制作了一个js函数，该函数将用给定数量的单元格填充。grid元素，这些单元格将在网格布局中进行样式化。

对于这些单元格，稍后将添加一个没有玩家歧视的点击事件监听器，这将检查用户是否有最新的移动，并将防止同一玩家在其他玩家做出选择之前选择一个单元格。

每当玩家拾取一个单元格时，回合计数器就会增加，拾取单元格的背景变为红色，并且事件将被打印到控制台

//build the grids
const grids = document.querySelectorAll('.grid');
grids.forEach(grid => populateGrid(grid, 10));
//populates the given grid in target with size*size cells
function populateGrid(target, size) {
for (let i = 0; i < size * size; i++) {
const cell = document.createElement('div');
cell.classList.add('cell');
target.appendChild(cell);
}
}
//function called each time the click event occurs on cells
let turn = 0;
let latestMoveBy = '';
function playerMove(player, cell){
if(latestMoveBy == player)
return;
turn++;
cell.classList.add('picked');
latestMoveBy = player;
console.log(`Player: ${player} picked a cell at turn: ${turn}`);
}
//pick all the .cell elements inside a .grid
document.querySelectorAll(".grid .cell")
//and for each one of them attach a click event handler
.forEach( cell => {
cell.addEventListener("click", (event) => {
const clickedCell = event.target;
const player = clickedCell.parentElement.dataset.player;
playerMove(player, clickedCell);
});
});

.grid>.cell {
background:  darkgray;
cursor: pointer;
width: 20px;
height: 20px;
}
.grid {
display: grid;
grid-gap: 5px;
grid-template-columns: repeat(10, auto);
grid-template-rows: auto;
grid-auto-flow: row;
width: fit-content;
box-sizing: border-box;
}
.picked {
background: red !important;
}

<div id="enemyGrid" class="grid" data-player="player1">
</div>
<hr>
<div id="meGrid" class="grid" data-player="player2">
</div>