点击外部关闭菜单 - Vanilla JS答案

【问题标题】：Close menu on click outside - Vanilla JS点击外部关闭菜单 - Vanilla JS
【发布时间】：2020-04-12 17:12:09
【问题描述】：

我创建了一个侧边菜单，当单击菜单按钮时它会显示和隐藏。现在，我希望当我在菜单外单击时菜单会关闭，但我不知道该怎么做。

我尝试在正文中添加点击侦听器，但这会完全禁用菜单。如果clickedElement != sideBar && sideBar.style = "200px"，我还想获取被点击元素的ID，如果clickedElement != sideBar && sideBar.style = "200px"，则关闭菜单，但我无法让它工作。有人可以帮我吗？我想找到一个没有 JQuery 的解决方案。

menuBtn.addEventListener("click", function () {
  if (sideBar.style.width == "200px") {
    sideBar.style.width = "0px";
    setTimeout(function () {
      menuItems.style.display = "none";
    }, 1000);
  } else {
    sideBar.style.width = "200px";
    menuItems.style.display = "block";
  }
});

【问题讨论】：

标签： javascript

【解决方案1】：

您可以向父容器添加事件监听器并检查单击的目标是否在元素内，例如：

document.addEventListener("click", (e) => {
  if (box.contains(e.target)) {
    result.innerHTML = "inside";
  } else {
    result.innerHTML = "outside";
  }
});

#box {
  width: 100px;
  height: 100px;
  background-color: dodgerblue;
}

<div id="box"></div>
<div id="result"></div>

【讨论】：

点击菜单中的子元素怎么样？它再次关闭。我们如何防止这种情况发生？