JavaScript使用forEach绑定点击事件重复触发如何修复

你遇到的现象对应两种常见的问题场景：

• 场景1：HTML结构嵌套错误
  你实际渲染出的三个.item元素并非平级，而是嵌套关系：内容为1的元素是最外层，内容为2的元素嵌套在1内部，内容为3的元素嵌套在2内部。点击内层元素时，点击事件会逐层向上冒泡，触发所有上层.item绑定的点击事件，因此点击最内层的3会触发3次事件，点击2触发2次，点击最外层的1仅触发1次。
• 场景2：事件绑定代码重复执行
  你把document.querySelectorAll('.item').forEach(...)这段绑定逻辑放在了会多次执行的函数中（比如动态新增元素后的回调、组件渲染生命周期函数等）。每执行一次绑定逻辑，页面上已经存在的所有.item都会被额外绑定一次相同的点击事件。如果元素是按3→2→1的顺序依次添加到页面中，那最早出现的3会被累计绑定3次，2累计绑定2次，最后新增的1仅绑定1次，触发事件时就会出现你看到的现象。

针对结构嵌套错误 #

直接修正HTML代码，确保三个<article class="item">是平级关系，放在.container下即可：

<div class="container">
  <article class="item">3</article>
  <article class="item">2</article>
  <article class="item">1</article>
</div>

针对事件绑定重复执行 #

推荐优先使用事件委托方案，只需要在初始化时执行一次绑定，后续新增.item元素也能正常触发事件，不会出现重复绑定问题：

document.querySelector('.container').addEventListener('click', function (e) {
  // 判断点击的目标是否是.item元素
  if (e.target.matches('.item')) {
    console.log('Hello World!')
  }
})

如果你希望继续使用逐个绑定的写法，可以在绑定时增加标识避免重复绑定：

document.querySelectorAll('.item').forEach(item => {
  // 已经绑定过事件的元素直接跳过
  if (item.__hasClickBound) return
  item.addEventListener('click', function () {
    console.log('Hello World!')
  })
  // 给元素添加已绑定的标记
  item.__hasClickBound = true
})

内容的提问来源于stack exchange，提问作者Nikoloz Tukhashvili