如何点击导航链接时移除EventListener并隐藏导航列表

要实现点击导航链接滚动到锚点后，移除汉堡按钮的点击监听并隐藏导航列表，核心问题是匿名事件监听器无法被移除，同时需要判断滚动是否完成。下面是具体实现：

修改JavaScript代码 #

const button = document.getElementById("hamburger");
const list = document.getElementById("list");
const navLinks = document.querySelectorAll("#list a");

// 将汉堡菜单的点击逻辑改为命名函数，方便后续移除监听
function toggleMenu() {
    list.classList.toggle('show');
}

// 绑定初始的汉堡菜单点击事件
button.addEventListener("click", toggleMenu);

// 给每个导航链接绑定点击事件
navLinks.forEach(link => {
    link.addEventListener("click", function() {
        // 点击链接后先隐藏导航列表
        list.classList.remove('show');
        
        // 获取目标锚点元素
        const targetId = this.getAttribute('href').substring(1);
        const targetElement = document.getElementById(targetId);
        
        // 监听滚动事件，判断是否到达目标位置
        function checkScrollCompletion() {
            const currentScroll = window.scrollY || document.documentElement.scrollTop;
            const targetTop = targetElement.offsetTop;
            
            // 允许50px的误差范围，避免因滚动精度问题无法触发
            if (Math.abs(currentScroll - targetTop) < 50) {
                // 移除汉堡按钮的点击监听
                button.removeEventListener("click", toggleMenu);
                // 移除滚动监听，防止重复触发
                window.removeEventListener('scroll', checkScrollCompletion);
            }
        }
        
        // 添加滚动监听
        window.addEventListener('scroll', checkScrollCompletion);
        // 立即检查一次，处理页面已在目标位置的情况
        checkScrollCompletion();
    });
});

关键说明 #

1. 命名函数替代匿名函数：原来的汉堡菜单点击事件用了匿名函数，无法通过removeEventListener移除，改成命名函数toggleMenu后才能正常移除监听。
2. 滚动完成判断：通过监听scroll事件，对比当前滚动位置和目标锚点的顶部位置，设置50px的误差范围，确保滚动到目标区域后再执行后续操作。
3. 及时清理监听：完成操作后移除滚动监听，避免后续滚动时重复触发逻辑。

如果不需要严格等待滚动完成，只是点击导航链接后就执行操作，可以简化代码：

const button = document.getElementById("hamburger");
const list = document.getElementById("list");
const navLinks = document.querySelectorAll("#list a");

function toggleMenu() {
    list.classList.toggle('show');
}

button.addEventListener("click", toggleMenu);

navLinks.forEach(link => {
    link.addEventListener("click", () => {
        list.classList.remove('show');
        button.removeEventListener("click", toggleMenu);
    });
});

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