求助：仅点击页面空白处显示弹窗，点击Menu不触发且隐藏菜单

问题分析 #

1. 点击菜单按钮时事件会冒泡到document，导致弹窗被意外触发
2. 原判断仅检查event.target是否等于菜单元素本身，未覆盖菜单子元素的点击场景
3. 缺少点击空白区域时隐藏菜单栏的逻辑

修正后的完整代码 #

<!-- Main content -->
<main>
  <p>点击右上角的菜单按钮查看菜单项。</p>
  <!-- 补全菜单按钮与菜单项的HTML结构 -->
  <button id="menu-button">菜单</button>
  <div id="menu-items" style="display: none;">
    <div>菜单项1</div>
    <div>菜单项2</div>
    <div>菜单项3</div>
  </div>
  <!-- Pop-up message -->
  <div id="pop-up" style="display: none;">
    <p>Hello there!</p>
  </div>
</main>
<script>
  const menuButton = document.getElementById("menu-button");
  const menuItems = document.getElementById("menu-items");
  const popUp = document.getElementById("pop-up");

  // 菜单按钮点击：切换显示状态，阻止事件冒泡
  menuButton.addEventListener("click", function (event) {
    event.stopPropagation();
    const isHidden = window.getComputedStyle(menuItems).display === "none";
    menuItems.style.display = isHidden ? "block" : "none";
    popUp.style.display = "none";
  });

  // 菜单区域点击：阻止事件冒泡，避免触发弹窗
  menuItems.addEventListener("click", function (event) {
    event.stopPropagation();
  });

  // 全局空白点击：显示弹窗 + 隐藏菜单栏
  document.addEventListener("click", function () {
    popUp.style.display = "block";
    menuItems.style.display = "none";
  });
</script>

关键修改说明 #

• 给菜单按钮、菜单区域的点击事件添加event.stopPropagation()，阻止事件向上冒泡到document，避免触发弹窗逻辑
• 使用window.getComputedStyle()判断菜单状态，比直接读取style.display更可靠（支持外部样式表定义的显示规则）
• 全局点击事件直接实现「显示弹窗+隐藏菜单栏」的组合逻辑
• 点击菜单按钮时自动隐藏弹窗，优化交互体验

内容的提问来源于stack exchange，提问作者raj kumar raj bv