选项卡不会触发focusout事件[JS，HTML]

Question

我有一个弹出列表，建议搜索结果有点像在谷歌上搜索。我有2个事件监听器，应该显示和隐藏弹出窗口，如果你点击该地区。它适用于点击，但如果你试图用标签导航，它只会让它永远打开。

使用选项卡导航时，如何使focusout事件发生？

js prettyprint-override">var popup2 = document.querySelector(".suggest-pop-up.s2");

document.getElementById('tags').addEventListener('focusout', e => {
  if (!popup2.contains(e.relatedTarget)) {
    popup2.style.display = "none";
    popup2.style.pointerEvents = "none";
  }
});
document.getElementById('tags').addEventListener('focusin', e => {
  if (!popup2.contains(e.relatedTarget)) {
    popup2.style.display = "block";
    popup2.style.pointerEvents = "all";
  }
});

<input id="tags" type="text" class="suggest s2" name="tags" required="required" autocomplete="off">
<div class="suggest-pop-up s2" style="display: block; pointer-events: all;">
  <div class="suggest-box s2">
    <li tabindex="0">#THING 1</li>
    <li tabindex="0">#THING 2</li>
  </div>
</div>

<br><div>I want #THING 1 and #THING 2 to appear on 1. tab press, then to be selectable while on any of the <li> and then to go away when tabing to the next element outside suggest-box s2.</div>

Answer 1

某事是错误的：

if (!popup2.contains(e.relatedTarget)) {

Answer 2

我没有太多的时间，所以我给你留下这个，尝试使用这个变量的标签导航

// check for focus
var isFocused = (document.activeElement === popup2);
alert(isFocused); // will come out false if not focused

Answer 3

当它离开时，你只有一次可以将焦点移出，所以更好的方法可能是在身体上委派一个事件。

下面是一个在body标记上使用委托事件的示例，然后它使用最近来查看它是否是任何项，如果是的话，它不会崩溃。

const popup2 = document.querySelector(".suggest-pop-up.s2");

document.body.addEventListener('focusout', e => {
  if (e.relatedTarget && e.relatedTarget.closest('.suggest-pop-up')) return;
  popup2.style.display = "none";
  popup2.style.pointerEvents = "none";
}); 

document.getElementById('tags').addEventListener('focusin', e => {
  popup2.style.display = "block";
  popup2.style.pointerEvents = "all";
});

html lang-html prettyprint-override"><input id="tags" type="text" class="suggest s2" name="tags" required="required" autocomplete="off">
<div class="suggest-pop-up s2" style="display: none; pointer-events: all;">
  <div class="suggest-box s2">
    <li tabindex="0">#THING 1</li>
    <li tabindex="0">#THING 2</li>
  </div>
</div>
  
<div>
  <input/>
</div>