Javascript onclick在快速添加/删除时没有正确响应

我想做一个吃角子老虎机。要创建老虎机影响，我将从包装器中删除第一个div并将其添加回底部。当我使用

1000ms

值时，onClick事件工作正常，但当我使用

100ms

间隔之类的值时，我需要快速单击多次，以便它注册单击事件。为什么会有这种行为

同样在触摸屏上（在手机上检查），我没有遇到这个问题

setInterval（函数（）{
交换盒（）；
}, 100);
函数交换盒（）{
让first_box=document.getElementsByClassName（“box”）[0]；
第一个_框。移除（）；
document.getElementsByClassName（“div包装器”）[0].appendChild（第一个\u框）；
第一个_box.addEventListener（“单击”，函数（）{
log（this.innerText）；
});
}

.box{
宽度：100px；
高度：50px；
边框：1px纯黑；
}

0
1.
2.
3.
4.
5.
6.
7.

我有三条建议：

不要在

setInterval

处理程序中附加一个单击处理程序，只需设置一次单击处理程序。删除一个元素并不会删除它的事件处理程序，所以您会在循环中附加重复的处理程序

您可以通过让父级处理所有子级的事件来“虚拟化”它，而不是将处理程序附加到每个项

click

在元素移动如此频繁的情况下无法正常工作的原因是，单击由鼠标下键和鼠标上键组成，因此如果元素在这些阶段之间从指针下方移出，则可能无法正常工作。一种解决方案是使用

mousedown

事件

let container=document.querySelector（'.div wrapper'）；
函数handleClick（e）{
如果（e.target.className=='box'）{
console.log（第一个\u框.innerText）；
}
}
container.addEventListener（“mousedown”，handleClick，false）；
设置间隔（交换盒，100）；
函数交换盒（）{
const first_box=document.getElementsByClassName（“box”）[0]；
第一个_框。移除（）；
container.appendChild（第一个_框）；
}

.box{
宽度：100px；
高度：50px；
边框：1px纯黑；
}

0
1.
2.
3.
4.
5.
6.
7.

您知道您设置了多少个单击事件侦听器吗？Zillions@ibrahimmahrir我该如何处理呢？@AkashKumar到底所有的框都应该是可点击的吗？@RokoC.Buljanyes@AkashKumar为什么不将单击指定给父级

.div包装器
？我不记得有一台老虎机，在那里，一个单元格可以被点击……回答得很好！不过有一件事，OP正在尝试捕捉第一个
.box
元素上的点击。你的孩子为他们所有人都这么做。我建议您将变量
first\u box
设置为全局变量，然后在事件处理程序中检查
e.target===first\u box
是否会更新。没有意识到它只用于第一个框。@Jacob将
mousedown
也用于触摸输入？我认为大多数/所有移动浏览器都将鼠标事件转换为指针事件。