如何为focusout事件排除指定元素？附HTML代码片段

嘿，我来帮你搞定这个focusout事件排除指定元素的需求！

首先明确核心思路：focusout事件是会冒泡的，我们可以利用事件对象的relatedTarget属性（表示焦点转移到的元素），或者直接检查事件目标，来判断是不是触发了要排除的元素，从而跳过后续逻辑。

先把你给出的页面结构简化下方便参考：

你的页面核心结构大概是这样：

<div class="whole-container" id="body">
  <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
    <div class="queryAndpostswitcher">
      <button id="logOut" name="logOut" title="Log Out From The Site">
        <i class="fas fa-sign-out-alt"></i>
      </button>
    </div>
  </form>
  <!-- 这里应该还有你要监听focusout的元素，比如输入框、弹窗之类的 -->
</div>

原生JavaScript实现方案 #

假设你要给某个元素（比如输入框#targetInput）绑定focusout事件，但希望点击#logOut按钮时不触发这个事件，代码可以这么写：

// 获取要监听的元素和要排除的按钮
const targetElement = document.getElementById('targetInput');
const excludedBtn = document.getElementById('logOut');

targetElement.addEventListener('focusout', function(event) {
  // 关键判断：检查焦点是不是转移到了排除按钮或者它的子元素上（比如按钮里的<i>标签）
  if (excludedBtn.contains(event.relatedTarget)) {
    return; // 直接返回，不执行后续的focusout逻辑
  }

  // 这里写你原本要在focusout时执行的代码
  console.log('focusout事件正常触发，不是点击退出按钮导致的');
});

如果是给父容器（比如#body）绑定focusout，需要排除子元素#logOut的情况，代码可以调整为：

const container = document.getElementById('body');
const excludedBtn = document.getElementById('logOut');

container.addEventListener('focusout', function(event) {
  // 两种判断场景：要么失去焦点的是排除元素本身，要么焦点转移到了排除元素上
  if (excludedBtn === event.target || excludedBtn.contains(event.relatedTarget)) {
    return;
  }

  // 执行你的业务逻辑
});

jQuery实现方案（如果项目用了jQuery） #

如果你的项目依赖jQuery，写法会更简洁：

$('#targetInput').on('focusout', function(event) {
  const $excludedBtn = $('#logOut');
  // 检查焦点转移的目标是否属于排除按钮的子元素或自身
  if ($excludedBtn.has(event.relatedTarget).length) {
    return;
  }

  // 这里写你的focusout处理逻辑
});

几个注意点 #

• 优先用focusout而不是blur：因为blur事件不会冒泡，而且relatedTarget属性在blur事件下的兼容性不如focusout
• 别忽略子元素：比如你的按钮里有<i>标签，点击这个图标时，relatedTarget是<i>而不是按钮本身，所以要用contains方法来判断，确保所有子元素都被纳入排除范围

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