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

Question

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

我使用下面的(简化的(代码设置了这两个，但我希望能够在调整浏览器窗口大小时交换事件侦听器。我一直在尝试使用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);
}
});
}

Answer 1

与其在一个元素上交换侦听器，不如使用两个单独的元素，每个元素都有一个事件侦听器，然后使用CSS媒体查询将display: none设置在要隐藏的元素上。

这里有一个只使用CSS的过于简化的例子，如果你真的想使用JS，那么你可以设置element.style.display属性，但使用CSS更具性能，即使屏幕多次调整大小也能工作。

#top-bar {
display: block;
}
#side-bar {
display: none;
}
@media screen and (min-width: 960px) {
#top-bar {
display: none;
}
#side-bar {
display: block;
}
}

<div id="top-bar">top</div>
<div id="side-bar">side</div>