禁用事件点击一定次数后侦听器

Question

如何在收到一定数量的点击后禁用事件侦听器？

我认为下面的代码是错误的，因为我要求从事件侦听器中禁用事件侦听器。

let cells = document.querySelectorAll('.cell');

let temp = 0;

function clicker (x) {

  temp += 1;

  console.log('clicked',x.target.classList[1],temp);

  x.target.style.backgroundColor = 'red';

  if (temp === 3) {

    cells.forEach(c => c.removeEventListener('click', (el) => clicker(el)));

  }

  return;

}

cells.forEach(c => c.addEventListener('click', (el) => clicker(el)));

.main {

  display: grid;

  grid-template-columns: repeat(3,90px);

  grid-template-rows: repeat(2, 90px);

  row-gap: 5px;

  column-gap: 5px;

}

.cell {

  width: 90px;

  height: 90px;

  background-color: blue;

}

<div class="main">

  <div class = "cell fir"></div>

  <div class = "cell sec"></div>

  <div class = "cell thi"></div>

  <div class = "cell fou"></div>

  <div class = "cell fif"></div>

  <div class = "cell six"></div>

</div>

Answer 1

传递给 的函数必须与 传递给 的函数相同。由于您在每个地方都使用匿名函数，因此它们将不是相同的函数。removeEventListeneraddEventListener只需使用函数的名称，而不是调用它的匿名函数。let cells = document.querySelectorAll('.cell');let temp = 0;function clicker (x) {&nbsp; temp += 1;&nbsp; console.log('clicked', temp);&nbsp; if (temp === 3) {&nbsp; &nbsp; cells.forEach(c => c.removeEventListener('click', clicker));&nbsp; }&nbsp; return;}cells.forEach(c => c.addEventListener('click', clicker));.main {&nbsp; display: grid;&nbsp; grid-template-columns: repeat(3,90px);&nbsp; grid-template-rows: repeat(2, 90px);&nbsp; row-gap: 5px;&nbsp; column-gap: 5px;}.cell {&nbsp; width: 90px;&nbsp; height: 90px;&nbsp; background-color: blue;}<div class="main">&nbsp; <div class = "cell fir"></div>&nbsp; <div class = "cell sec"></div>&nbsp; <div class = "cell thi"></div>&nbsp; <div class = "cell fou"></div>&nbsp; <div class = "cell fif"></div>&nbsp; <div class = "cell six"></div></div>