当焦点移出元素的所有子元素时，仅触发事件

Question

当且仅当用户的焦点从子元素

转移时，例如从到，我想触发一个事件：

<div onfocusout="console.log(document.activeElement)">
  <input type="text" id="input1">
  <input type="text" id="input2">
</div>

<input type="text" id="input3">

然而，即使焦点在

元素的内部元素之间转移，例如从到，仍会触发focusout事件。更糟糕的是，在触发focusout时，document.activeElement总是解析为（表明焦点回滚到然后再移回），因此在focusout触发之前，我甚至无法手动验证新的焦点位置。

- SkyNT

Answer 1

您可以检查传递给处理程序的事件的relatedTarget属性，以查看会获得新焦点的元素是哪个：

const container = document.querySelector('#container');
container.addEventListener('focusout', (e) => {
  console.log(e.relatedTarget);
  if (!container.contains(e.relatedTarget)) console.log('focus is now outside of container');
});

<div id="container">
  <input type="text" id="input1">
  <input type="text" id="input2">
</div>

<input type="text" id="input3">

- CertainPerformance