如何在jQuery嵌套点击函数中阻止事件传播？

这问题我太熟了！你遇到的核心问题是每次点击标签时都重复给框内区域绑定了点击事件——相当于点一次标签就给框加一个监听器，点五次就堆了五个监听器，最后点框的时候自然会挨个触发一遍！

下面给你几个靠谱的解决方案，按需选择：

方案1：先解绑旧监听器，再绑定新的 #

这个思路最直接：每次给框绑定新的点击逻辑前，先把之前绑定的监听器移除。但要注意，匿名函数没法解绑，所以得把框的点击逻辑抽成命名函数：

// 把框的点击逻辑抽成独立函数
function handleBoxClick() {
  console.log(`确认选中的标签：${window.selectedLabel}`);
  // 可选：处理完就解绑，避免后续误触发
  document.getElementById('box').removeEventListener('click', handleBoxClick);
}

// 给所有标签绑定点击事件
document.querySelectorAll('.label').forEach(label => {
  label.addEventListener('click', function() {
    const box = document.getElementById('box');
    // 先移除之前可能存在的监听器
    box.removeEventListener('click', handleBoxClick);
    // 记录当前选中的标签
    window.selectedLabel = this.textContent;
    // 绑定新的监听器
    box.addEventListener('click', handleBoxClick);
  });
});

方案2：使用一次性事件监听器 #

利用addEventListener的第三个参数{once: true}，让监听器自动触发一次后就解绑，从根源上避免重复绑定：

document.querySelectorAll('.label').forEach(label => {
  label.addEventListener('click', function() {
    const box = document.getElementById('box');
    // 先清空框上的所有旧监听器（克隆节点会移除所有绑定事件）
    const newBox = box.cloneNode(true);
    box.replaceWith(newBox);
    
    // 绑定一次性监听器，触发后自动解绑
    newBox.addEventListener('click', () => {
      console.log(`确认选中的标签：${this.textContent}`);
    }, {once: true});
  });
});

方案3：用变量追踪当前有效监听器 #

维护一个变量保存当前的监听器引用，每次点击标签时替换掉旧的，确保框上永远只有一个有效监听器：

let currentBoxListener = null;
let selectedLabel = '';

document.querySelectorAll('.label').forEach(label => {
  label.addEventListener('click', function() {
    const box = document.getElementById('box');
    // 移除旧的监听器
    if (currentBoxListener) {
      box.removeEventListener('click', currentBoxListener);
    }
    
    selectedLabel = this.textContent;
    // 创建新的监听器
    currentBoxListener = () => {
      console.log(`确认选中的标签：${selectedLabel}`);
      // 执行后清空，避免后续误触发
      currentBoxListener = null;
      box.removeEventListener('click', currentBoxListener);
    };
    
    box.addEventListener('click', currentBoxListener);
  });
});

关键原理总结 #

你之前的代码之所以会重复触发，是因为每次点击标签都在给框新增监听器，而不是替换旧的。这些监听器会一直存留在元素的事件队列里，直到被手动移除或者元素被销毁。上面的方案都是围绕「确保框上永远只有一个有效监听器」或者「监听器触发一次就自动销毁」来解决问题的。

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