使用JavaScript e.target实现点击mega menu外部关闭功能失效如何解决

问题原因 #

你的代码存在核心的事件绑定逻辑错误：点击事件监听器仅绑定在.drop-down菜单元素本身，只有点击行为落在菜单内部时才会触发监听器执行判断逻辑，点击菜单外区域时不会进入你的判断分支，自然无法检测到外部点击。

修正方案 #

将全局点击监听器绑定到document对象上，每次点击时先判断是否存在处于展开状态的菜单（带有.display-on类的元素），再校验点击目标是否位于展开菜单的外部，满足条件则移除.display-on类关闭菜单。

最终实现代码 #

// 缓存所有下拉菜单元素
const dropDownMenus = document.getElementsByClassName("drop-down");

// 全局点击监听，检测外部点击
document.addEventListener("click", (e) => {
  const activeMenu = document.querySelector(".display-on");
  // 没有展开的菜单直接终止逻辑
  if (!activeMenu) return;
  // 点击区域不在展开菜单内部时执行关闭
  if (!activeMenu.contains(e.target)) {
    activeMenu.classList.remove("display-on");
  }
});

// 阻止菜单内部点击事件冒泡到全局，避免内部点击触发关闭
for (let i = 0; i < dropDownMenus.length; i++) {
  dropDownMenus[i].addEventListener("click", (e) => {
    e.stopPropagation();
  });
}

如果你存在单独的菜单展开触发按钮，需要给触发按钮也加上e.stopPropagation()的点击监听，避免点击展开按钮后立刻触发全局监听逻辑导致菜单刚展开就被关闭。

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