无法禁用classList切换：语言切换链接hover状态控制失效

需求 #

多个带lang-switcher类的链接，鼠标悬停时通过_is-active-simple-link类改变颜色。需要实现：

• 点击链接后，保持激活状态（禁用悬停时的类切换）
• 再次点击链接，恢复原本的鼠标悬停效果

当前JavaScript代码无法实现该逻辑，相关代码如下：

现有代码 #

HTML结构（单个链接示例，其余结构一致） #

<div class="header__lang-container _flex-column-center nav__item-container">
    <a href="" class="nav__simple-link header__lang lang-switcher">eng</a>
    <ul class="lang-container">
        <li><a href="" data-lang="eng" class="lang-container__eng lang-container__item">eng</a></li>
        <li><a href="" data-lang="ukr" class="lang-container__ukr lang-container__item">ukr</a></li>
    </ul>
</div>

CSS样式 #

._is-active-simple-link {
    color: rgb(194, 190, 190);
}
.nav__simple-link {
    transition: color .3s;
    font-weight: bold;
}

原JavaScript代码 #

const lang_switchers = document.querySelectorAll('.lang-switcher');
let isSwitcherOpen = false;
lang_switchers.forEach(elem => {
        elem.addEventListener('click', (e) => {
            e.preventDefault();
            if(!isSwitcherOpen) {
                hoveredLink();
                makeLinkInactive();
            }
            else {
                unhoveredLink();
                makeLinkActive();
            }
            isSwitcherOpen = !isSwitcherOpen;
        });

        makeLinkActive();

        function makeLinkActive() {
            elem.addEventListener('mouseover', hoveredLink);
            elem.addEventListener('mouseout', unhoveredLink);
        }

        function makeLinkInactive() {
            elem.removeEventListener('mouseover', hoveredLink);
            elem.removeEventListener('mouseout', unhoveredLink);
        }

        function hoveredLink() {
            elem.classList.add('_is-active-simple-link');
        }

        function unhoveredLink() {
            elem.classList.remove('_is-active-simple-link');
        }
    });

问题分析 #

原代码的核心问题是使用了全局变量isSwitcherOpen，所有语言切换链接共用同一个状态，导致点击其中一个链接后，其他链接的交互逻辑会被错误触发。另外，反复绑定/解绑事件监听器的方式不够可靠，状态管理不够清晰。

修复后的代码 #

给每个链接单独维护激活状态，用元素自身的类标记是否处于“禁用悬停”状态，避免全局状态冲突：

const langSwitchers = document.querySelectorAll('.lang-switcher');

langSwitchers.forEach(elem => {
    // 初始化绑定悬停事件
    bindHoverEvents();

    elem.addEventListener('click', (e) => {
        e.preventDefault();
        const isDisabled = elem.classList.contains('disabled-hover');
        
        if (!isDisabled) {
            // 进入禁用悬停状态：保持激活样式，标记禁用状态，移除悬停事件
            elem.classList.add('_is-active-simple-link');
            elem.classList.add('disabled-hover');
            unbindHoverEvents();
        } else {
            // 恢复悬停状态：移除激活样式和禁用标记，重新绑定悬停事件
            elem.classList.remove('_is-active-simple-link');
            elem.classList.remove('disabled-hover');
            bindHoverEvents();
        }
    });

    function bindHoverEvents() {
        elem.addEventListener('mouseover', handleMouseOver);
        elem.addEventListener('mouseout', handleMouseOut);
    }

    function unbindHoverEvents() {
        elem.removeEventListener('mouseover', handleMouseOver);
        elem.removeEventListener('mouseout', handleMouseOut);
    }

    function handleMouseOver() {
        // 未禁用悬停时才添加激活类
        if (!elem.classList.contains('disabled-hover')) {
            elem.classList.add('_is-active-simple-link');
        }
    }

    function handleMouseOut() {
        // 未禁用悬停时才移除激活类
        if (!elem.classList.contains('disabled-hover')) {
            elem.classList.remove('_is-active-simple-link');
        }
    }
});

优化说明 #

1. 移除全局状态：每个链接通过自身的disabled-hover类独立管理状态，避免多链接互相干扰
2. 增强逻辑可靠性：悬停事件中增加状态判断，确保禁用状态下不会触发样式切换
3. 逻辑更清晰：点击事件直接切换状态类，同步处理事件绑定/解绑和激活样式的添加移除

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