Javascript два прослушивателя событий конфликтуют между собой
Привет, у меня есть слушатель envent в моем гамбургере меню, который открывает и закрывает мою полноэкранную навигацию. В полноэкранном режиме я могу открывать и закрывать меню, нажимая на бургер.
В качестве второго шага я попытался реализовать дополнительную функциональность, целью которой должно быть закрытие моей полноэкранной навигации независимо от того, где пользователь щелкает. Однако это работает, пока пользователь щелкает элемент моей навигации или пустую область окна просмотра, но не работает, если пользователь щелкает бюргера. Вот мой код вместе с кодовой ручкой. Любая помощь приветствуется.
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>
ЯВАСКРИПТ
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");
})
Спасибо, но я хотел бы узнать, почему, когда я добавляю прослушиватель событий в документ (второй прослушиватель событий в моем фрагменте), первый перестает работать. Просто чтобы я мог понять
Моя ошибка заключалась в том, что я поместил второй даже прослушиватель на сам документ, а не просто добавил его в область навигации, порт просмотра которой установлен на 100%. вот как я изменил свой код: mouseup", () => { navTogglerBurger.classList.remove("open"); navBar.classList.remove("active"); }); }) ```
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Моя ошибка заключалась в том, что я поместил второй даже прослушиватель на сам документ, а не просто добавил его в область навигации, порт просмотра которой установлен на 100%. вот как я изменил свой код:
// ! 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");
});
})
// !
используйте логическое значение, например
isMenuOpen, и добавьте прослушиватель событий клика на гамбургер, который проверяет, открыто ли меню или нет, и если это так, скройте меню