0

我正在创建一个简单的单页网站的响应式导航栏。打开汉堡菜单并单击锚链接后，汉堡事件侦听器消失了，所以我必须刷新才能让它再次工作。不使用链接，我可以毫无问题地打开和关闭。我究竟做错了什么？如何防止事件侦听器消失？我试过使用 event.preventDefault() 函数。泰亚！

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

});

和 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>

解决方案：

我必须为 hamburgerIcon 事件侦听器内的菜单中的链接添加 event.stopPropagation()：

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

1 回答 1

0

这可能是由于事件冒泡，可以通过使用event.stopPropagation();来避免。所以捕获锚链接点击事件并停止传播。

参考： Event.StopPropagation 事件冒泡

编辑：虽然这可以快速解决，但它不是理想的解决方案。在这里查看更多细节（礼貌：Raz Luvaton）。

于 2021-09-21T16:39:55.900 回答