添加/删除速度非常快时,onclick没有正确响应

Question

我有点想做一台老虎机.要创建老虎机影响我从包装器中删除第一个div并将其添加回底部.当我使用值时,onClick事件工作正常,1000ms但当我使用像100msinterval这样的东西时,我需要快速点击多次以便注册点击事件.为什么会这样？

另外在触摸屏上(在我的手机上查看)我没有遇到这个问题.

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>