javascript - 点击一定次数后禁用事件监听器

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

传递给removeEventListener的函数必须与传递给addEventListener的函数相同。由于您在每个地方都使用匿名函数，因此它们不会是相同的函数。

只需使用函数的名称，而不是调用它的匿名函数。

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

let temp = 0;
function clicker (x) {
  temp += 1;
  console.log('clicked', temp);
  if (temp === 3) {
    cells.forEach(c => c.removeEventListener('click', clicker));
  }
  return;
}

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

.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>