如何以不同的屏幕大小交换JavaScript事件侦听器

我正在构建一个导航菜单，其中桌面版本将子菜单显示为鼠标悬停时出现的下拉菜单，而移动版本具有手风琴风格的子菜单，可在单击/触摸时触发

我使用下面的（简化）代码设置了这两个，但我希望能够在调整浏览器窗口的大小时交换事件侦听器。我一直在尝试使用resizeObserver删除和重新添加事件侦听器，但在正确解除绑定侦听器时遇到问题

const viewportWidth = window.innerWidth;
const menuItems = document.querySelectorAll('[data-menu-item]');

function setupMenu() {


    menuItems.forEach((item) => {
        const itemHandler = toggleState.bind(null, item);

        if (viewportWidth > 960) {
            item.addEventListener('mouseover', itemHandler);
            item.addEventListener('mouseout', itemHandler);
        } else {
            item.addEventListener('click', itemHandler);
        }
    });

}

---

与交换元素上的侦听器不同，您应该使用两个单独的元素，每个元素都有一个事件侦听器，然后使用CSS媒体查询在要隐藏的元素上设置

display:none

这里是一个简单的CSS示例，如果你真的想使用JS，那么你可以设置

元素.style.display

属性，但是使用CSS更有效，即使屏幕大小被多次调整，也可以使用CSS

#顶栏{
显示：块；
}
#侧栏{
显示：无；
}
@媒体屏幕和屏幕（最小宽度：960像素）{
#顶杆{
显示：无；
}
#侧栏{
显示：块；
}
}

顶部
侧面

您不应该尝试交换事件侦听器，您应该交换HTML元素…将

viewportWidth>960

移动到内部

itemHandler

以便在事件触发时检查宽度，而不是在initI上。我建议不要添加和删除处理程序。检查处理程序回调函数中的条件，如果不适用，则让它们什么也不做。旁注：并非所有触摸设备都限制在960像素以内。好的，普遍的共识是，我尝试交换事件侦听器是错误的。我在这里采用了这种方法，并且在大约5分钟内完成了所有工作。谢谢