CODEWITHSUNDEEP
javascriptevent-listenerresponsive-nav
LiliV
LiliV

Reputation: 1

Event listener is removed after clicking on an anchor link in the responsive navbar

I am creating a simple one page website's responsive navbar. After opening the hamburger menu and clicking on an anchor link the hamburgers event listener disappears, so I have to refresh to have it work again. Without using the link I can open and close without any problem. What am I doing wrong? How can I prevent the event listener to disappear? I have tried using the event.preventDefault() function. TYA!

The JS:

 document.addEventListener('DOMContentLoaded', function(event) {
const navLinks = document.querySelector(".nav-ul");
const hamburgerIcon = document.querySelector("#open-nav");
const closeIcon = document.querySelector("#close-nav");
const nav = document.querySelector(".navbar-links")

hamburgerIcon.addEventListener('click', function() {
    nav.classList.add("open");
    navLinks.style.display = "block";
    hamburgerIcon.style.display = "none";
    closeIcon.style.display = "block";
});

closeIcon.addEventListener('click', function() {
    nav.classList.remove("open");
    navLinks.style.display = "none";
    hamburgerIcon.style.display = "block";
    closeIcon.style.display = "none";
});

});

and the HTML:

<div class="navbar-container">
<div id="navbar">
    <div id="open-nav" class="toggle-icon">
        <i class="fas fa-bars"></i>
    </div>
    <div id="close-nav" class="toggle-icon">
        <i class="fas fa-times"></i>
    </div>
    <div class="navbar-links">
        <ul class="nav-ul">
            <li class="nav-li">
                <a class="navlink" href="#home"><%= t("navbar.home").upcase %></a>
            </li>
            <li class="nav-li">
                <a class="navlink" href="#about"><%= t("navbar.about").upcase %></a>
            </li>
            <li class="nav-li">
                <a class="navlink" href="#training"><%= t("navbar.training").upcase %></a>
            </li>
            <li class="nav-li">
                <a class="navlink" href="#coaching"><%= t("navbar.coaching").upcase %></a>
            </li>
            <li class="nav-li">
                <a class="navlink" href="#"><%= t("navbar.contact").upcase %></a>
            </li>
        </ul>
    </div>
</div>

SOLUTION:

I had to add event.stopPropagation() for the links in the menu inside the hamburgerIcon event listener:

const links = document.querySelectorAll(".navlink");

hamburgerIcon.addEventListener('click', function() {
    nav.classList.add("open");
    navLinks.style.display = "block";
    hamburgerIcon.style.display = "none";
    closeIcon.style.display = "block";
    links.forEach(link => {
        link.addEventListener('click', (event) => {
            event.stopPropagation();
        });
    });
});

Upvotes: 0

Views: 390

Answers (1)

Aswin
Aswin

Reputation: 26

This could be due to event bubbling which can be avoided by using event.stopPropagation(); So capture the anchor link click event and stop propagation.

References: Event.StopPropagation Event Bubbling

EDIT: Although this can be a quick work around, it is not the ideal solution. Check here for more details (courtesy: Raz Luvaton).

Upvotes: 0

Related Questions