如何实现点击页面body区域时自动关闭下拉菜单

你的代码存在5个核心问题导致功能失效：

• 全局点击事件的回调函数没有声明e事件形参，直接调用e.target会触发JS引用错误，代码根本无法正常执行
• 点击范围判断逻辑有缺陷：仅判断了点击目标id是否为菜单本身，没有覆盖菜单内部的子元素（菜单项、图标、文字等），点击菜单内部内容时也会误触发关闭
• 事件冒泡冲突：点击触发按钮时，点击事件会向上冒泡到body，导致按钮触发菜单展开的瞬间，body上的监听又把菜单关闭，逻辑互相冲突
• 原body上的关闭逻辑没有同步切换按钮图标，会出现菜单已关闭但按钮还是叉号图标的状态错位问题
• 监听绑定在body上存在兼容问题：如果页面内容高度不足，body没有占满整个视口，点击视口内body外的空白区域不会触发监听

1. 先把HTML里按钮标签上的内联事件onclick="userMenu()"删掉，避免重复绑定事件
2. 替换原有的JS逻辑为以下代码：

const triggerBtn = document.querySelector(".user_menu_button");
const dropMenu = document.getElementById("mts_menu");

/**
 * 统一控制菜单展开/收起，同步切换按钮图标
 * @param {boolean|undefined} forceState 可选，强制指定展开/收起状态
 */
function setMenuState(forceState) {
  const shouldShow = forceState ?? !dropMenu.classList.contains("show");
  dropMenu.classList.toggle("show", shouldShow);
  triggerBtn.innerHTML = shouldShow 
    ? '<i class="icn_button fa-solid fa-xmark"></i><span class="txt_button">Account</span>'
    : '<i class="icn_button fa-solid fa-bars"></i><span class="txt_button">Account</span>';
}

// 绑定触发按钮点击事件
triggerBtn.addEventListener("click", (e) => {
  // 阻止点击事件冒泡到全局，避免触发关闭逻辑
  e.stopPropagation();
  setMenuState();
});

// 绑定全局点击事件，点击菜单/按钮外区域关闭
document.addEventListener("click", (e) => {
  // 菜单处于收起状态时直接跳过逻辑
  if (!dropMenu.classList.contains("show")) return;
  // 点击区域在触发按钮内、或者菜单内部时，不执行关闭
  if (triggerBtn.contains(e.target) || dropMenu.contains(e.target)) return;
  // 其余情况关闭菜单
  setMenuState(false);
});

• 全局点击事件绑定到document而非body，保证整个视口的点击都能被监听到
• 用Node.contains()方法判断点击目标是否在按钮/菜单内部，覆盖所有内部子元素的点击场景，不会误关闭
• 把菜单状态切换、图标更新的逻辑封装成公共方法，所有触发场景（按钮点击、外部点击关闭）都调用同一个方法，彻底避免状态不同步的问题
• 按钮点击时阻止事件冒泡，解决按钮点击和全局关闭逻辑的冲突问题

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