如何实现div失焦仅当焦点移出所有子元素时触发关闭功能

核心解决思路 #

focusout是冒泡事件，子元素失焦时会向上冒泡到父容器，你原来的代码只要收到事件就直接关闭，才会出现子元素切换焦点也触发关闭的问题。正确的逻辑是判断新获得焦点的元素是否仍在菜单容器内部，只有当新焦点落在容器外部时才执行关闭。

修改后的JS代码 #

// 提前缓存DOM，避免重复查询
const menu = document.getElementById("menu");
const triggerBtn = document.querySelector('button[onclick="openMenu()"]');

function openMenu() {
  menu.setAttribute("open", "");
  // 先移除再绑定，避免重复注册事件
  menu.removeEventListener("focusout", handleMenuFocusOut);
  menu.addEventListener("focusout", handleMenuFocusOut);
  menu.focus();
}

function closeMenu() {
  menu.removeAttribute("open");
  // 无障碍优化：关闭后将焦点返回触发按钮
  triggerBtn.focus();
  menu.removeEventListener("focusout", handleMenuFocusOut);
}

function handleMenuFocusOut(e) {
  // e.relatedTarget 指向失去焦点后新获得焦点的元素
  // 只有新焦点不在菜单内部时才执行关闭
  if (!e.relatedTarget || !menu.contains(e.relatedTarget)) {
    console.log("焦点已移出菜单，执行关闭");
    closeMenu();
  }
}

// 额外无障碍优化：按Esc键快速关闭菜单
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && menu.hasAttribute('open')) {
    closeMenu();
  }
});

补充说明 #

• 代码用到的FocusEvent.relatedTarget是焦点事件的原生属性，对应focusout触发后即将接收焦点的元素
• Node.contains()是DOM原生方法，可判断一个节点是否是另一个节点的后代（包含节点自身），只要新焦点属于菜单的子元素/菜单本身，就不会触发关闭
• 新增的Esc关闭、焦点回退逻辑符合WAI-ARIA无障碍菜单的通用规范，可直接保留使用

你的原有HTML、CSS代码不需要做任何修改，替换JS部分即可实现预期效果。

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