如何通过右键点击外部关闭处于激活状态的下拉菜单？

我需要实现点击菜单外部时关闭处于激活状态的菜单，现有代码如下：

const menuButton = document.querySelector('.fa-bars');
const barsArea = document.querySelector('.bars-area');
const bodyArea = document.querySelector('body');

menuButton.addEventListener('click', function () {
  if (!barsArea.classList.contains('active')) {
        barsArea.classList.add('active');
    } else if (barsArea.classList.contains('active')) {
        barsArea.classList.remove('active');
    }
});

我尝试添加以下代码但未能生效，求正确实现方法：

bodyArea.addEventListener('click', function() {
 if (barsArea.classList.contains('active') {
    barsArea.classList.remove('active');
 {
});

问题分析与解决方法 #

你尝试的代码存在两处语法错误：

• if 条件末尾缺少闭合括号 )
• 代码块末尾缺少闭合花括号 }

即便修正语法，直接给body绑定点击事件仍会有逻辑问题：点击菜单按钮时，事件会冒泡到body，导致刚打开的菜单立刻被关闭。

正确的实现思路如下：

1. 给document绑定点击事件（比监听body更可靠，避免body未占满视口的情况）
2. 在回调中判断点击目标是否属于菜单区域或菜单按钮，若不属于则关闭菜单
3. 给菜单按钮的点击事件添加stopPropagation()，阻止事件冒泡到document

修正后的完整代码：

const menuButton = document.querySelector('.fa-bars');
const barsArea = document.querySelector('.bars-area');

menuButton.addEventListener('click', function (e) {
  // 阻止事件冒泡，避免触发document的点击事件
  e.stopPropagation();
  // 用toggle简化激活状态切换逻辑
  barsArea.classList.toggle('active');
});

document.addEventListener('click', function(e) {
  // 点击目标不在菜单区域内，且菜单处于激活状态时关闭菜单
  if (!barsArea.contains(e.target) && barsArea.classList.contains('active')) {
    barsArea.classList.remove('active');
  }
});

额外优化说明 #

• 使用classList.toggle('active')替代原有的if-else判断，代码更简洁
• 监听document而非body，确保页面任何空白区域的点击都能触发关闭逻辑
• 加入事件冒泡拦截，避免菜单按钮的点击操作触发菜单关闭逻辑

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