原生JS循环绑定点击事件时出现监听器多次重复执行的问题

• 你遇到的重复输出问题，核心来自事件监听器的重复叠加绑定：每次调用textElmEventListener时，代码会拉取页面上所有现存的text_box类元素，直接给每个元素新增click事件监听，全程没有清理元素上已经绑定过的旧监听。
• 按3个元素的生成流程核算绑定次数：
  1. 页面仅存在span1时，首次调用绑定函数：给span1绑定1次click事件
  2. 新增span2后第二次调用绑定函数：querySelectorAll会同时查到span1、span2，给span1追加1次事件、给span2绑定第1次事件，此时span1累计绑定2次，span2累计绑定1次
  3. 新增span3后第三次调用绑定函数：querySelectorAll查到全部3个元素，给span1、span2分别再追加1次事件，给span3绑定第1次事件，最终累计绑定次数为span1=3次、span2=2次、span3=1次
• 你尝试在事件回调中写break触发报错，是因为break关键字仅支持在循环、switch代码块内部使用，单独放在事件回调中没有对应的可中断结构，本身这个解决方向就和报错原因不匹配。

方案1：最小改动修正重复绑定逻辑 #

把事件回调抽成独立的具名函数，每次绑定新事件前，先移除元素上已绑定的同类型监听，避免事件叠加：

// 抽离独立的具名点击回调，支持精准移除
function handleTextBoxClick(e) {
    // 用事件对象的currentTarget拿当前绑定元素，避免闭包捕获的元素引用偏差
    console.log(e.currentTarget);
}

function textElmEventListener(){
    const wysiTextElms = document.querySelectorAll(".text_box")
    for (const t_e of wysiTextElms) {
        // 先清理旧的同类型事件，再重新绑定
        t_e.removeEventListener("click", handleTextBoxClick);
        t_e.addEventListener("click", handleTextBoxClick);
    }
};

这个方案改动量最小，不需要调整原有的触发逻辑，只要保留每次新增元素后调用textElmEventListener的流程，就能保证每个元素上的事件监听仅保留1份，不会出现重复触发的问题。

方案2：更优的事件委托方案 #

彻底放弃“新增元素就全量遍历绑定”的逻辑，利用事件冒泡特性，把统一的点击监听绑定到外层容器（比如document）上，动态判断点击目标是否匹配text_box类即可。这种方式不需要反复执行绑定/解绑操作，天生兼容动态新增的元素，性能表现更好：

// 全局只需要执行一次绑定，不需要随元素新增重复调用
document.addEventListener("click", function(e) {
    // 兼容元素内部点击的场景，用closest向上匹配text_box类
    const matchedEl = e.target.closest(".text_box");
    if (matchedEl) {
        console.log(matchedEl);
    }
})

*说明：因为你的目标元素是带contenteditable属性的span，点击时的事件触发目标可能是元素内部嵌套的子元素，用closest做向上匹配，能覆盖所有点击元素内部的场景，不会出现匹配失效的问题。

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