如何让JavaScript事件处理器每次仅返回一个outerHTML值？

问题原因 #

点击与单选框关联的<label>元素（或label内部的嵌套元素）时，浏览器会执行两个操作：

1. 触发label本身的点击事件
2. 自动触发关联<input type="radio">的点击事件
   加上事件冒泡的影响，最终导致处理器收到两次回调，返回两个值。

解决方案1：阻止默认行为+停止冒泡（优先取外层label） #

这个方案会优先获取点击区域的外层label作为主元素，同时阻止label触发单选框的默认点击行为，从根源上避免重复触发：

document.addEventListener('click', function(e) {
  let target = e.target;
  
  // 向上找到最外层的主元素：优先取label，再取关联的单选框
  if (target.closest('label')) {
    target = target.closest('label');
    // 阻止label的默认行为，避免自动触发关联单选框的点击
    e.preventDefault();
  } else if (target.tagName === 'INPUT' && target.type === 'radio') {
    // 如果直接点击单选框，可选关联到对应的label
    const linkedLabel = document.querySelector(`label[for="${target.id}"]`);
    target = linkedLabel || target;
  }

  // 停止事件冒泡，防止上层元素的事件处理器重复触发
  e.stopPropagation();
  
  // 返回目标元素的outerHTML
  return target.outerHTML;
});

解决方案2：只响应单选框的点击事件（优先取单选框） #

如果需求是优先返回单选框本身的outerHTML，可以直接监听单选框的点击逻辑，利用label点击会自动触发单选框事件的特性：

document.addEventListener('click', function(e) {
  let target = e.target;
  
  // 从点击元素向上追溯，找到关联的单选框
  if (target.tagName === 'LABEL') {
    target = document.getElementById(target.getAttribute('for')) || target;
  } else if (target.closest('label')) {
    const label = target.closest('label');
    target = document.getElementById(label.getAttribute('for')) || label;
  }

  // 只处理单选框或其关联label，停止冒泡和默认行为
  if (target.type === 'radio' || target.tagName === 'LABEL') {
    e.stopPropagation();
    e.preventDefault();
  }
  
  return target.outerHTML;
});

核心逻辑说明 #

• e.preventDefault()：阻止label触发单选框点击的默认行为，彻底消除两次事件的源头
• e.stopPropagation()：终止事件冒泡，避免父级元素的事件处理器重复执行
• closest('selector')：快速定位嵌套元素的外层目标容器，确保始终取到你需要的主元素

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