在非常快地添加/删除时，单击未正确响应

Question

我有点想做一台老虎机。为了创建老虎机影响，我正在从包装器中删除第一个div并将其添加回底部。当我使用1000ms值时，onClick 事件工作正常，但是当我使用类似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>