启用/禁用事件监听器

Question

I'm building a Chess game on JS, and every pieces of the board are "clickable", I added an EventListener('click') on them, I also added an EventListener('click') after that to select where should the piece go.

But I need to know if there's any kind of interrupter related to a EventListener , in order to switch between an enabling an EventListener and disabling it. For example, when an certain variable is true I'd only have white pieces clickable and black ones otherwise.

Answer 1

Instead of considering how to enable or disable listeners individually, I think it would be easier to have all clicks go through the same listener, and have that listener first check the board state to see whether a click on that location is permitted. If not, return and don't do anything. If so, continue.

For example, you could have something like:

const board = [
  [ // row 1
    { // square 1A
      piece: 'rook',
      owner: 'white',
    }
    // ...

Then, inside the listener, navigate to the clicked square in the board , and check whether the owner corresponds to the current player or not.

// inside listener:
// you will need to implement logic to get the row and column
// from a clicked button
const clickedSquare = board[i][j];
if (clickedSquare.owner !== currentPlayer) {
  return;
}
// rest of function

When a turn ends, just toggle currentPlayer from 'black' to 'white' or back again.