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的元素内（例如，焦点）转移，也会触发聚焦事件。当焦点从input1转移到input2时。更糟糕的是，document.activeElement始终会在触发聚焦后立即解决body（建议聚焦在回到body之前一直滚动回到input2），因此我什至无法在触发聚焦之前手动验证新焦点在哪里结束。

Answer 1

您可以检查传递给处理程序的relatedTarget的{{1}}属性，以查看哪个元素获得了新的焦点：

event

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');
});

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

1 个答案: