如何实现按下Tab键离开#search div时触发指定函数？

我懂你的需求：当通过Tab键把焦点从#search容器内的元素移到外部（比如Link2或Random按钮）时，要触发目标函数，但目前只有离开输入框时才会输出日志。问题出在焦点切换的时机——focusout触发时，新的活跃元素还没完全确定，导致你的判断逻辑没能准确捕捉到真正离开容器的场景。

解决方案：用延迟判断确保焦点完成切换 #

我们可以借助setTimeout延迟一小段时间（哪怕是0毫秒，也能让浏览器先完成焦点切换的流程），再检查当前活跃元素是否在#search之外。这样就能精准捕捉到焦点完全离开容器的时刻：

$("#search").focusout(function () {
  setTimeout(() => {
    if (!$(this).has(document.activeElement).length) {
      console.log('OUT'); // 现在Tab到Link2或Random按钮时会触发
    }
  }, 0);
});

为什么原来的代码不生效？ #

当你从#search内的输入框按Tab到Search按钮时，#search的focusout会触发，但此时document.activeElement已经是Search按钮（仍然在容器内），所以你的判断会跳过日志。而当Tab到外部元素时，focusout触发的瞬间，浏览器还没完成焦点的更新，document.activeElement可能还是容器内的元素，导致判断失败。setTimeout会让判断代码在浏览器完成焦点切换后执行，这时候的activeElement才是准确的。

完整可测试代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
*:focus { outline: 4px solid red; }
#search { margin: 30px 0; }
</style>

<a href="#">Link1</a>
<a href="#">Link2</a>
<div id="search">
  <input type="text">
  <button>Search</button>
</div>
<button>Random</button>

<script>
$("#search").focusout(function () {
  setTimeout(() => {
    if (!$(this).has(document.activeElement).length) {
      console.log('OUT');
    }
  }, 0);
});
</script>

测试场景验证：

• 输入框→Tab→Search按钮：不会触发日志（焦点仍在容器内）
• Search按钮→Tab→Random按钮：触发日志（焦点离开容器）
• 输入框→Shift+Tab→Link2：触发日志（焦点离开容器）

完全符合你的需求！

内容的提问来源于stack exchange，提问作者Hotgeart