如何避免点击HTML复选框时触发onfocusout事件？

你遇到的核心问题是点击复选框（或其关联标签）时，会同时触发onclick和onfocusout事件，导致目标函数被重复调用。以下是几种可行的解决方法：

方法一：利用事件对象的relatedTarget判断触发源 #

在focusout事件中，通过event.relatedTarget判断焦点是否转移到了复选框自身或其关联的<label>元素，如果是则跳过函数执行。这种方法无需额外状态变量，逻辑更简洁：

function triggerCheckBox(e) {
  // 仅当焦点不是转移到复选框或其关联标签时，才执行逻辑
  const checkbox = e.target;
  const related = e.relatedTarget;
  if (e.type === 'focusout' && related) {
    // 检查关联元素是否是复选框本身，或者是绑定了该复选框的label
    const isRelatedToCheckbox = related === checkbox || related.htmlFor === checkbox.id;
    if (isRelatedToCheckbox) return;
  }
  console.log('trigger checkbox got called');
}

修改后的HTML需要传递事件对象：

<input id="myCheckbox" type="checkbox" name="myCheckbox" 
     onfocusout="triggerCheckBox(event)" 
     onclick="triggerCheckBox(event)" 
     value="Bike">
       
<label for="myCheckbox"> I have a bike</label>

方法二：用标志位区分点击触发的情况 #

通过一个临时标志位标记是否是onclick触发的操作，在onfocusout中检查该标志，避免重复执行：

let isClickInvoked = false;

function triggerCheckBox(e) {
  if (e.type === 'click') {
    isClickInvoked = true;
    // 执行核心逻辑
    console.log('trigger checkbox got called');
    // 延迟清除标志，确保focusout事件触发时能检测到
    setTimeout(() => {
      isClickInvoked = false;
    }, 100);
  } else if (e.type === 'focusout') {
    if (!isClickInvoked) {
      console.log('trigger checkbox got called');
    }
  }
}

对应的HTML同样需要传递事件对象：

<input id="myCheckbox" type="checkbox" name="myCheckbox" 
     onfocusout="triggerCheckBox(event)" 
     onclick="triggerCheckBox(event)" 
     value="Bike">
       
<label for="myCheckbox"> I have a bike</label>

替代方案：改用onchange事件（推荐） #

如果你的需求是复选框状态变更时触发函数，而不是必须在失去焦点时触发，那么直接使用onchange事件是最优解。无论是通过点击操作，还是Tab导航+空格切换状态，onchange都会仅触发一次，完全避免事件冲突：

function triggerCheckBox() {
  console.log('trigger checkbox got called');
}

<input id="myCheckbox" type="checkbox" name="myCheckbox" 
     onchange="triggerCheckBox()" 
     value="Bike">
       
<label for="myCheckbox"> I have a bike</label>

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