javascript - 删除事件监听器并在调整大小时重置 classList 切换

Question

我想在调整浏览器大小时删除特定屏幕尺寸上的单击事件监听器。

问题是下面的代码在我刷新页面并且期望的结果就在那里的情况下工作。然而，在调整浏览器大小时，它会保持在低于所需宽度时可点击或超过所需宽度时不可点击的状态。

let viewPort = window.innerWidth || document.documentElement.clientWidth;
let dropToggle = document.querySelectorAll(".someparent");
let dropMenu = document.querySelectorAll(".somechild");

for (let i = 0; i < dropToggle.length; i++) {
  dropToggle[i].addEventListener('click', function a(event) {
    if (viewPort < 786) {
      dropMenu[i].classList.toggle("drop");
      if (event.dropToggle == 2);
      event.stopPropagation();
    }
    else {
      dropToggle.removeEventListener('click', a);
      /*update*/
      dropMenu[i].classList.remove("drop");
    }
    /*update*/
    window.addEventListener("resize", function() {
     viewPort = window.innerWidth || document.documentElement.clientWidth;
    }, true);
  });
}

所以基本上，我需要在调整浏览器大小而不刷新页面的情况下启动该功能。任何帮助将不胜感激。

编辑使用部分解决方案更新了代码。

新问题:如果未在较小宽度上关闭，切换 classList.toggle“drop”将保持打开状态。将 classList.remove 添加到 else 条件中的“drop”也不起作用，这实际上在调整大小时完全删除了该函数。有没有办法在调整大小时重置 classList.toggle？

Answer 1

每次调整窗口大小时，您都需要更新 viewPort 的值。目前，viewPort 在您加载页面时初始化，但永远不会再次重新初始化。为此，您可以向您的窗口添加一个resize事件监听器:

window.addEventListener("resize", function() {
  viewPort = window.innerWidth || document.documentElement.clientWidth;
}, true);