时间戳

首页 > 解决方案 > 使用 JavaScript e.target 在元素外部单击不起作用

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

问题描述

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

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

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");
    }
  });
}

如果需要，可以在这里查看工作演示。

谢谢。

标签： javascriptdomevent-handlingdom-eventsevent-delegation

解决方案

从上面的评论...

“当然，OP 需要在任何分类元素之外注册对“下拉”事件的处理。可能是正确的监听元素。”drop-downdocument.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);

推荐阅读