响应式导航栏点击锚链接后hamburger事件监听器消失问题如何解决

点击汉堡菜单内的锚点链接时，事件冒泡会触发上层元素的绑定事件，打乱原有汉堡菜单的交互逻辑，并非事件监听器真的被移除。你之前调用的event.preventDefault()仅能阻止链接默认跳转行为，无法处理事件冒泡带来的逻辑冲突，因此无法解决问题。

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");
    // 获取所有导航内锚点链接
    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();
                // 若需要点击链接后自动关闭汉堡菜单，可取消注释下方代码
                /*
                nav.classList.remove("open");
                navLinks.style.display = "none";
                hamburgerIcon.style.display = "block";
                closeIcon.style.display = "none";
                */
            });
        });
    });

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

如果需要优化交互体验，可开启上述代码中的注释逻辑，实现点击锚点链接后自动关闭汉堡菜单的效果，无需用户手动点击关闭按钮。

内容的提问来源于stack exchange，提问作者LiliV