javascript - 快速添加/删除时 onclick 没有正确响应

Question

我正在尝试制作一台老虎机。要创建老虎机效果，我要从包装器中删除第一个 div 并将其添加回底部。 onClick 事件在我使用 1000ms 值时工作正常，但当我使用类似 100ms 间隔时，我需要快速点击多次才能注册点击事件。为什么会出现这种行为？

同样在触摸屏上(在我的手机上检查过)我没有遇到这个问题。

setInterval(function() {

  swap_box();
}, 100);

function swap_box() {
  let first_box = document.getElementsByClassName("box")[0];
  first_box.remove();
  document.getElementsByClassName("div-wrapper")[0].appendChild(first_box);

  first_box.addEventListener("click", function() {
    console.log(this.innerText);
  });

}

.box {
  width: 100px;
  height: 50px;
  border: 1px solid black;
}

<div class="div-wrapper">
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>

Answer 1

我有三个建议:

1. 不是在 setInterval 处理程序中附加点击处理程序，而是只设置一次点击处理程序。删除元素不会删除其事件处理程序，因此您会在循环中附加重复的处理程序。
2. 您可以通过让父项处理所有子项的事件来“虚拟化”它，而不是将处理程序附加到每个项。
3. click 不能很好地处理移动太多的元素的原因是点击是由鼠标按下和鼠标抬起组成的，所以如果元素从您的下方移出这些阶段之间的指针，它可能不起作用。一种解决方案是改用 mousedown 事件。

let container = document.querySelector('.div-wrapper');

function handleClick(e) {
  if (e.target.className === 'box') {
    console.log(first_box.innerText);
  }
}

container.addEventListener("mousedown", handleClick, false);

setInterval(swap_box, 100);

function swap_box() {
  const first_box = document.getElementsByClassName("box")[0];
  first_box.remove();
  container.appendChild(first_box);
}

.box {
  width: 100px;
  height: 50px;
  border: 1px solid black;
}

<div class="div-wrapper">
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
</div>