如何使用JavaScript实现点击元素外部区域时自动隐藏该元素

代码存在的问题 #

• getElementsByTagName("body")返回的是包含body元素的HTMLCollection集合，无法直接对整个集合绑定事件监听，需要取出集合内的第一个元素才是body的DOM对象。
• if判断条件中错误使用了赋值运算符=，而非相等判断运算符===，导致判断逻辑完全失效，每次执行函数都会直接执行代码块里的赋值语句。
• 未处理事件冒泡逻辑：点击导航按钮的事件会冒泡到body层，导致菜单刚被显示就立刻触发body的点击事件隐藏菜单；同时点击菜单本身区域时也会触发隐藏逻辑，不符合交互需求。

修复后的完整代码 #

const navButton = document.getElementById("nav-btn");
const menu = document.getElementById("nav-menu");
// 提取真实的body DOM元素
const body = document.getElementsByTagName("body")[0];

const menuActive = (e) => {
    // 阻止点击按钮的事件冒泡到body，避免刚显示就被隐藏
    e.stopPropagation();
    if (menu.style.display === "none") {
        menu.style.display = "block";
    }
}

const menuDeactive = () => {
    if (menu.style.display === "block") {
        menu.style.display = "none";
    }
}

navButton.addEventListener("click", menuActive);
// 点击菜单本身时阻止事件冒泡，不触发隐藏逻辑
menu.addEventListener("click", (e) => e.stopPropagation());

body.addEventListener("click", menuDeactive);

补充说明 #

如果菜单的初始显隐状态是通过CSS类而非行内样式控制的，建议改用类名切换的方式控制显隐，逻辑会更稳定：

/* CSS部分 */
.nav-menu {
  display: none;
}
.nav-menu.active {
  display: block;
}

// 对应JS逻辑调整
const menuActive = (e) => {
  e.stopPropagation();
  menu.classList.add("active");
}
const menuDeactive = () => {
  menu.classList.remove("active");
}

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