JavaScript FocusOut - 获取获得焦点的元素

Question

当 FocusOut 事件被引发时，您如何知道哪个元素获得焦点？

正确的方法似乎是使用事件的 relatedTarget 属性。但是，这似乎不适用于所有浏览器:

• 在谷歌浏览器中，它有效
• 在 Firefox 和 Internet Explorer 中，relatedTarget 为空
• 在 Safari 中，relatedTarget 属性甚至不存在

我找到了一个仅在 IE 中有效的解决方法(使用 document.activeElement)，但我想知道是否没有一个已证明在所有主要浏览器中都有效的通用解决方案。

虽然我可以找到类似的问题和答案，但我还没有找到真正适用于所有浏览器的解决方案。

编辑:下面的例子说明了我的意思。

代码:

document.getElementById('text1').addEventListener('focusout', function(e) {
  // At this point, I want to know which element is receiving the focus (i.e. text2)
  console.log(e.relatedTarget); // works in Chrome
  console.log(document.activeElement); // works in IE
  // both do not work in Firefox or Safari
});

<input id="text1" type="text" value="first" />
<input id="text2" type="text" value="second" />

Answer 1

我有一个针对 Firefox 的假设和解决方法。 document.activeElement 似乎有效。然后 focusout 命中，所以它被删除。到 focusin 命中时(或者可能紧接着)，将再次有一个 focused 元素。但是在 out 和 in 之间没有任何焦点，因此没有元素被报告为事件的。

我的解决方法是愚蠢的 setTimeout hack。 setTimeout( function() {console.log(document.activeElement)}, 1); 可靠地为我提供了一个事件元素。诚然，我只在一台机器上进行了测试，并且测试了 90 秒，但这是迄今为止我发现的最好的结果。