自定义切换按钮点击无响应、侧边栏误关闭的技术问题求助

问题1：点击locationPill时showSidebar函数未执行 #

你的代码在每次滚动到scrollY > 69时，都会重复给locationPill添加click事件监听——频繁绑定事件不仅会导致逻辑冗余，还可能因为重复绑定引发异常，甚至导致点击无响应。

修复方案：

• 将click事件监听移到滚动监听逻辑之外，只绑定一次，避免重复绑定。
• 确保DOM加载完成后再获取元素，防止因元素未初始化导致的绑定失败。

修改后的代码示例：

// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 替换为你实际的DOM选择器
    const sidebar = document.querySelector('.sidebar');
    const overlay = document.querySelector('.overlay');
    const locationPill = document.querySelector('.location-pill');

    function showSidebar() {
        sidebar.classList.add('show');
        overlay.classList.add('enabled');
    }

    // 只绑定一次点击事件
    locationPill.addEventListener('click', showSidebar);

    function togglePill() {
        const scrolled = window.scrollY;
        if (scrolled <= 69) {
            locationPill.classList.remove('show');
        } else {
            locationPill.classList.add('show');
        }
    }

    window.addEventListener('scroll', togglePill);
});

问题2：点击侧边栏/汉堡按钮以外区域时侧边栏关闭 #

这是因为关闭侧边栏的全局点击逻辑会监听document层面的点击事件，当点击事件冒泡到document时触发关闭。解决思路是阻止侧边栏内部的事件冒泡，或者在关闭逻辑中过滤允许点击的目标。

方案1：阻止侧边栏内部事件冒泡 #

sidebar.addEventListener('click', function(e) {
    e.stopPropagation();
});

方案2：在关闭逻辑中过滤目标 #

假设你的关闭逻辑是监听document点击，修改为：

document.addEventListener('click', function(e) {
    const hamburgerBtn = document.querySelector('.hamburger-btn'); // 替换为你的汉堡按钮选择器
    // 判断点击目标是否不属于侧边栏、汉堡按钮、locationPill
    if (!sidebar.contains(e.target) && e.target !== hamburgerBtn && e.target !== locationPill) {
        sidebar.classList.remove('show');
        overlay.classList.remove('enabled');
    }
});

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