屏幕宽度大于1020px时removeEventListener未生效问题求助

问题原因 #

你的代码无法正确移除点击事件，核心原因是每次触发resize事件执行navBarPhoneScreenClickEffect时，内部定义的test函数都是全新的实例。removeEventListener要求传入的函数引用必须和addEventListener时完全一致，否则无法识别并移除对应的事件监听。

修改方案 #

将test函数移到外部作用域，保证每次添加/移除事件时使用的是同一个函数引用；同时在页面加载时主动执行一次函数，初始化正确的事件状态。

基础修复版代码

// 把test函数放在外部，确保引用始终一致
function test() {
    console.log('test');
}

function navBarPhoneScreenClickEffect() {
    const allPhoneTabsNav = document.querySelectorAll('div.phone-tab');
    let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
            
    if (vw <= 1020) {
        allPhoneTabsNav.forEach(tab => {
            tab.addEventListener('click', test);
        });
    } else {
        allPhoneTabsNav.forEach(tab => {
            tab.removeEventListener('click', test);
        });
    }
}

// 页面加载时初始化事件状态
navBarPhoneScreenClickEffect();
window.addEventListener('resize', navBarPhoneScreenClickEffect, false);

性能优化版代码

如果导航栏元素不会动态变化，可以将DOM查询缓存起来，避免每次resize都重复查询DOM：

// 缓存DOM元素，仅查询一次
const allPhoneTabsNav = document.querySelectorAll('div.phone-tab');

function test() {
    console.log('test');
}

function navBarPhoneScreenClickEffect() {
    let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
            
    if (vw <= 1020) {
        allPhoneTabsNav.forEach(tab => {
            tab.addEventListener('click', test);
        });
    } else {
        allPhoneTabsNav.forEach(tab => {
            tab.removeEventListener('click', test);
        });
    }
}

navBarPhoneScreenClickEffect();
window.addEventListener('resize', navBarPhoneScreenClickEffect, false);

额外说明 #

• 使用forEach替代for循环，代码更简洁易读
• 初始执行navBarPhoneScreenClickEffect，避免页面加载时直接处于大屏状态但事件未被移除的情况

内容的提问来源于stack exchange，提问作者Ovidiu-Alexandru Iftemie