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

Question

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();
        });
    });
});

Aswin · Answer 1 · 2021-09-21T18:55:49.107

0

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).

edited Sep 21 '21 at 18:55

answered Sep 21 '21 at 16:39

Aswin

26
4

That was it! Thank you so much! – LiliV Sep 21 '21 at 17:13
Don't use stop propagation!, see [here](https://css-tricks.com/dangers-stopping-event-propagation/) why, I promise you it will cause you problems in the future that you won't even know where they came from (talking from experience) – Raz Luvaton Sep 21 '21 at 17:18
@Raz - You are right. I have modified my answer to highlight this point. – Aswin Sep 21 '21 at 18:57

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

1 Answers1