使用 JavaScript e.target 在元素外部单击不起作用

Question

我正在构建一个超级菜单，每个菜单上都有一个关闭按钮，效果很好。但是我需要编写一些 JavaScript 来说明，“如果您在打开的大型菜单之外单击，请关闭它”。

我在下面写了一个脚本。它确实会检测用户何时在超级菜单内部单击，但当他们在其外部单击时不会检测到。在这种情况下，删除使元素具有display: block; 的display-on 类。

const dropDownMenu = document.getElementsByClassName("drop-down");

for (let i = 0; i < dropDownMenu.length; i++) {
  dropDownMenu[i].addEventListener("click", (e) => {
    // If clicking in any area that has drop-down class, do nothing.
    if (dropDownMenu[i].contains(e.target)) {
      console.log("clicked in mega menu area");
      // If clicking in any area outside drop-down class, remove display-on class which closes the menu.
    } else {
      console.log("clicked outside mega menu area");
      document.querySelector(".display-on").classList.remove("display-on");
    }
  });
}

如果需要可以查看工作演示here。

谢谢。

Answer 1

从上面的评论...

“因为 OP 需要在任何 drop-down 分类元素之外注册对 “out of drop-down” 事件的处理。document.body 可能是正确的元素听。”

...类似这样的...

function handleDropDownMenuBehavior(evt) {
  if (evt.target.closest('.drop-down') === null) {

    document.querySelector(".display-on").classList.remove("display-on");

    console.log("clicked outside mega menu area");
  } else {
    console.log("clicked in or at mega menu area");
  }
}
document.body.addEventListener('click', handleDropDownMenuBehavior);

Answer 2

您可以在文档中添加一个全局事件侦听器，以检查单击的内容是否不是超级菜单。如果您需要任何额外的帮助，请告诉我:)

document.onclick = (e) => {
    if (e.target.contains(document.getElementsByClassName("drop-down")[0])) {
        console.log('close mega menu');
        document.getElementsByClassName("drop-down")[0].classList.remove("display-on");
    }
}