仅当焦点移出元素的任何子元素时才触发事件

Question

我想在 且仅当 用户关注 div 的子元素以外的其他地方时触发事件，例如当焦点从 input1 转移到 input3 时：

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

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

但是，即使焦点在 div 的元素内移动，也会触发 focusout 事件，例如当焦点从 input1 转移到 input2 时。更糟糕的是，document.activeElement 总是在 focusout 被触发的瞬间解析 body（表明焦点在返回 input2 之前一直滚回 body）所以我什至无法手动验证新焦点在 focusout 被触发之前结束的位置。

Answer 1

您可以检查传递给处理程序的 event 的 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">

仅当焦点移出元素的任何子元素时才触发事件

Fire event only when focus is moved outside of any of an element's children

html

javascript

focus