如何用纯JavaScript实现点击Div外部关闭菜单？

首先修正你现有代码中的错误：closeNav 函数里错误地引用了不存在的 main-home 元素，你的菜单ID是 main-menu-btn，所以先把关闭函数修正：

function closeNav() {
  document.getElementById("main-menu-btn").style.width = "0";
}

接下来实现点击菜单外部关闭菜单的功能，核心逻辑是监听全局点击事件，判断点击区域是否属于菜单内部，若不属于则触发关闭。完整实现如下：

function openNav() {
  const menu = document.getElementById("main-menu-btn");
  menu.style.width = "250px";
  // 菜单打开后添加全局点击监听
  document.addEventListener('click', handleOutsideClick);
}

function closeNav() {
  const menu = document.getElementById("main-menu-btn");
  menu.style.width = "0";
  // 菜单关闭后移除监听，避免无效触发
  document.removeEventListener('click', handleOutsideClick);
}

function handleOutsideClick(event) {
  const menu = document.getElementById("main-menu-btn");
  const closeBtn = document.querySelector(".closebtn");
  // 点击目标不在菜单内、不是关闭按钮，且菜单处于打开状态时关闭
  if (!menu.contains(event.target) && event.target !== closeBtn && menu.style.width !== "0") {
    closeNav();
  }
}

额外处理（针对打开按钮） #

如果你有单独的打开菜单按钮（比如汉堡图标），需要给它添加事件冒泡阻止，否则点击打开按钮时会触发全局事件直接关闭菜单：

假设打开按钮的HTML是：

<button id="open-menu-btn">☰</button>

添加如下事件处理：

document.getElementById("open-menu-btn").addEventListener('click', function(e) {
  e.stopPropagation(); // 阻止事件冒泡到document
  openNav();
});

关键说明 #

• 用element.contains()精准判断点击区域是否属于菜单内部，避免误关
• 菜单关闭后移除全局监听，减少不必要的性能开销
• 阻止打开按钮的事件冒泡，确保打开操作正常执行

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