如何实现仅在div元素焦点移出到外部时触发onBlur事件？

你遇到的问题是因为给div设置了tabIndex={0}，让它变成了可聚焦的焦点元素。当你在div内部的按钮间切换TAB时，焦点会先离开div（触发div的onBlur），然后才进入下一个按钮——这是DOM事件的正常行为：父元素的blur事件会先于子元素的focus事件触发，只要焦点离开了div本身（哪怕是移到它的子元素上），都会触发div的blur回调。

要实现仅在焦点移出div外部时触发函数，需要利用事件对象的relatedTarget属性，判断即将获得焦点的元素是否是当前div的后代元素。只有当新焦点不在div内部时，才执行你的逻辑。

修改后的代码如下：

export default function App() {
  const handleBlur = (e) => {
    // 检查即将获得焦点的元素是否不在div内部
    if (!e.currentTarget.contains(e.relatedTarget)) {
      console.log('Blur: 焦点已移出div外部');
    }
  };

  return (
    <>
      <div 
        onBlur={handleBlur} 
        style={{ padding: '20px', border: '1px solid #000'}} 
        tabIndex={0}
      >
        <button>1</button>
        <button>2</button>
      </div>
      <button>3</button>
    </>
  );
}

• e.relatedTarget：指向即将接收焦点的元素，如果焦点移出整个页面，这个值会是null。
• currentTarget.contains(relatedTarget)：判断新焦点元素是否是当前div的后代（包括div自身）。当relatedTarget为null时，contains(null)会返回false，此时也会触发逻辑，符合“焦点移出div”的预期。

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