最近,我写了一个由于JS结构问题而出现小错误的传送带图形小案例。 最后解决了这个错误,但是我想知道这个错误是如何发生的,也就是事件拦截的嵌套事件覆盖。
1 .关于错误的产生和说明:
首先自己重写了这个代码
div button单击/button /div script var n=0; var div=document.query selector (div ) var btns=document.queryselectorall (button ) div.addeventlistener ) ) addddddeveveved () ) )/script中可以看到,嵌套了两个事件侦听,并说明在执行此代码后,每次单击按钮控制台时应该会输出n 1的结果。
(这次的输出是4次点击的效果)
如果在我们第一次(即没有触发mouseover时)移动到箱子时单击,则输出是正确的,但触发mouseover (或其他事件)时,每次单击都会产生输出事件的触发次数倍数的数字
(这次的输出是一键的效果)
2 .解决错误:
所以会产生错误。 这个bug与事件监听没有事件覆盖有关。 (特别费解。 如果用传统事件取代事件监听,这个bug就会消失。
脚本var n=0; var div=document.query selector (div ) var btns=document.queryselectorall (button ) div.addeventlistener ) ) addddddeveveved () )/script只在每次单击时添加一次。 有知道这个bug的具体原理的伟大人物吗? 欢迎在评论区留言(拯救孩子) ~