如何处理容器中的事件元素？

Question

我想点击btnToggle，导航会运行但是我不知道为什么这段代码有时成功，有时不成功。

请帮帮我，谢谢大家

const nav = document.querySelector(".header-nav");
const btnToggle = document.querySelector(".header__btn-toggle");
document.addEventListener("click", (e) => {
  if (e.target.className == "header__btn-toggle") {
    nav.style.right = "0";
    // right to left
  } else {
    nav.style.right = "-100%";
    //left to right
  }
})

<header class="header">
  <a href="#" class="header__logo">
    <img src="./assets/logo.png" alt="Tvelia">
  </a>
  <ul class="header-nav">
    <a href="#" class="header-nav__item header-nav__item--active">Home</a>
    <a href="#" class="header-nav__item">Adventures</a>
    <a href="#" class="header-nav__item">About</a>
    <a href="#" class="header-nav__item">Contact</a>
    <a href="#" class="header-nav__item">Login</a>
    <a href="#" class="header-nav__item">Signup</a>
  </ul>
  <div class="header__btn-toggle">
    <div></div>
    <div></div>
    <div></div>
  </div>
</header>

Answer 1

首先，您应该将 addEventListener 附加到 btnToggle 而不是 document。

Answer 2

你很接近。因为您将事件侦听器附加到 document，所以如果您单击页面上的任意位置，您的回调函数实际上会运行。而且因为浏览器有一种叫做事件冒泡的东西，这可能是你不一致的原因。

相反，您应该只将事件侦听器放在按钮上。我会这样做：

const nav = document.querySelector(".header-nav");
const btnToggle = document.querySelector(".header__btn-toggle");
btnToggle.addEventListener("click", () => { nav.style.right = "0" })
const moveNavRight = (e) => {
    if (e.target !== btnToggle) nav.style.right = "-100%"
}
// If you wanted to change the hide effect to only work when you click the nav 
// (not anywhere on the page), you would change the following line to
// nav.addEventListener("click", moveNavRight)
document.addEventListener("click", moveNavRight)

在这里，为了更清楚一点，我将 moveNavRight 提取到一个单独的函数中。所以这段代码的工作原理是：如果您单击 btnToggle，导航将向右移动 0。但是如果您在其他任何地方单击 page/document，则导航将向右移动 -100%。

希望这就是您要找的！

如何处理容器中的事件元素？

How to handle event element in container?

html

javascript

css

menu

toggle