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

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) {

  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>