切换焦点时防止闪烁：如何检测focuschange而非focusin/focusout

核心问题原因 #

在两个输入控件间切换焦点时，浏览器会先触发前一个控件的focusout事件，再触发新控件的focusin事件。如果在focusout中直接恢复默认帮助，就会导致短暂的闪烁现象。

解决方案 #

方案一：延迟任务+清除机制

给恢复默认帮助的操作设置延迟，在新控件的focusin事件中取消该延迟，避免切换焦点时触发默认帮助：

let helpDelayTimer;

// 绑定所有输入控件的focusin事件
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('focusin', () => {
    clearTimeout(helpDelayTimer);
    // 显示当前控件对应的帮助内容，示例用data-help-id关联帮助项
    showHelpContent(input.dataset.helpId);
  });
});

// 绑定所有输入控件的focusout事件
document.querySelectorAll('input').forEach(input => {
  input.addEventListener('focusout', () => {
    // 100ms后检查是否还有聚焦的输入控件
    helpDelayTimer = setTimeout(() => {
      if (!document.querySelector('input:focus')) {
        showDefaultHelp();
      }
    }, 100);
  });
});

原理：控件切换焦点时，focusin会在focusout的延迟任务执行前触发，清除定时器，从而跳过默认帮助的显示；只有当焦点真正离开所有输入控件时，延迟任务才会生效。

方案二：利用focusout的relatedTarget属性

focusout事件的relatedTarget属性会指向焦点将要转移到的元素，通过判断该元素是否为输入控件，决定是否恢复默认帮助：

// 监听全局focusout事件（focusout支持冒泡）
document.addEventListener('focusout', (e) => {
  // 仅当失焦元素是输入控件，且焦点未转移到其他输入控件时，恢复默认帮助
  if (e.target.tagName === 'INPUT' && 
      (!e.relatedTarget || !e.relatedTarget.matches('input'))) {
    showDefaultHelp();
  }
});

// 监听全局focusin事件显示对应帮助
document.addEventListener('focusin', (e) => {
  if (e.target.tagName === 'INPUT') {
    showHelpContent(e.target.dataset.helpId);
  }
});

原理：如果relatedTarget是输入控件，说明是控件间的焦点切换，直接跳过默认帮助的恢复；只有当焦点离开所有输入控件时，才触发默认帮助。这个方案无需延迟，更精准高效。

推荐方案 #

优先选择方案二，它利用浏览器原生事件属性判断焦点转移目标，无需依赖延迟，逻辑更严谨，也不会引入不必要的时间等待。

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