Javascript 两个事件侦听器之间发生冲突

Question

Hi I have an envent listener on my menu burger which opens and closes my full screen navigation. When in full screen I can open and close the menu by clicking on the burger.

As a second step I have tried to implement a further functionality whose goal should be to close my full screen navigation no matter where the user clicks. However, this works as long as the user click on an item of my navigation or an empty area of the view port but it doesn't work if the user clicks the burgher. Here's my code along with a code pen. Any help is greatly appreciated.

HTML 
 <header>
        <nav class="navbar">
            <div class="logo">
                <a href="#">Logo</a>
            </div>
            <ul class="navbar__menu">
                <li class="navbar__menu-item"><a href="#home">Home</a></li>
                <li class="navbar__menu-item"><a href="#about">About</a></li>
                <li class="navbar__menu-item"><a href="#services">Services</a></li>
                <li class="navbar__menu-item"><a href="#">Plans</a></li>
                  <li class="navbar__menu-item"><a href="#">Team</a></li>
                <li class="navbar__menu-item"><a href="#">Contact Us</a> </li>
            </ul>
            <div class="navbar__toggler">
                <div class="navbar__toggler-burger"></div>
            </div>
        </nav>
    </header>

JAVASCRIPT

window.addEventListener("scroll", function () {
  const navbar = document.querySelector(".navbar");
  navbar.classList.toggle("sticky", window.scrollY > 0);
});

const navToggler = document.querySelector(".navbar__toggler");
const navTogglerBurger = document.querySelector(".navbar__toggler-burger");
const navBar = document.querySelector(".navbar__menu");

navToggler.addEventListener("click", () => {
  navTogglerBurger.classList.toggle("open");
  navBar.classList.toggle("open");
  document.querySelectorAll(".navbar__menu-item").forEach((el) => {
    el.addEventListener("click", () => {
      navBar.classList.remove("open");
      navTogglerBurger.classList.remove("open");
    });
  });
});

document.addEventListener('mouseup', () => {
   navBar.classList.remove("open");
   navTogglerBurger.classList.remove("open");
})

CodePen: https://codepen.io/Helye23/pen/RwGpoZM

Answer 1

My mistake was that I was putting the second evenlistener on the document itself instead of simply adding it to navigation area whose view port is set to 100%. here's how I canged my code:

// ! Adding an event listenter to the burger so that it can transform into an X and open the menu
navToggler.addEventListener('click', () => {
  navTogglerBurger.classList.toggle("open");
  navBar.classList.toggle("active");
// ! Adding an event listenter to the entire menu so that wherever the user clicks both the burger and the menu can be closed 
  navBar.addEventListener("mouseup", () => {
    navTogglerBurger.classList.remove("open");
    navBar.classList.remove("active");
  });
})


// !