Javascript 删除事件侦听器并在调整大小时重置类列表切换

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

问题是，下面的代码在我刷新页面并获得所需结果的地方起作用。但是，在调整浏览器大小时，它会保持在以下状态：如果低于所需宽度，则可单击；如果超过所需宽度，则不可单击

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);
  });
}

因此，基本上，我需要在调整浏览器大小而不刷新页面时启动该功能。任何帮助都将不胜感激

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

---

新问题：toggle classList.toggle下拉列表在较小宽度上未关闭时仍保持打开状态。在else条件中添加classList.remove到drop也不起作用，这实际上会完全删除resize函数。有没有办法重置classList.toggle on resize？

您需要在for循环之外定义事件侦听器调用 &在添加/删除事件侦听器方法中将回调作为引用传递

您还需要添加window.resize事件侦听器，如下所示

这段代码对您来说应该可以正常工作

let dropToggle = document.querySelectorAll(".someparent");
let dropMenu = document.querySelectorAll(".somechild");

function a(event) {
    dropMenu[i].classList.toggle("drop");
    if (event.dropToggle == 2);
    event.stopPropagation();
}

for (let i = 0; i < dropToggle.length; i++) {
    window.addEventListener("resize", function() {
        viewPort = window.innerWidth || document.documentElement.clientWidth;
        if (viewPort < 786) {
            dropToggle[i].addEventListener("click", a);
        } else {
            dropToggle[i].removeEventListener("click", a);
        }
    });

}

---

每次调整窗口大小时，都需要更新视口的值。加载页面时，视口已初始化，但再也不会重新初始化。为此，您可以向窗口中添加调整大小事件侦听器：

---

Matchmedia可以处理此问题，并在媒体窗口符合条件时允许使用javascript函数

参考资料可以在这里和这里找到

有效地解决了媒体对javascript的查询。语法基本上与CSS媒体查询相同

// media query event handler
if (matchMedia) {
  const mq = window.matchMedia("(min-width: 768px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

// media query change
function WidthChange(mq) {
  if (mq.matches) {
    // do what you want when  window width is at least 768px
  } else {
    // do what you want when window width is less than 768px
  }
}

---

这就完成了，把它放在else条件之后，谢谢！然而，我遇到了另一个问题；如果单击使其从较小的尺寸保持打开状态，然后将其调整为保持打开状态的较大宽度。所以我尝试添加：dropMenu[I].classList.removedrop；在else条件下，但不起作用，同时删除了resize上的函数。有没有关于如何改进的想法？@thx1138我本以为这会奏效，所以似乎奇怪的是，它不能/你可能会编辑你的问题，以显示你试图在这里关闭菜单名。普通用户在访问网站时不会疯狂地调整浏览器的大小。我可以让它保持原样，但是，这可能不是一个好主意，尤其是出于测试目的。同样是的，问题已经更新。@thx1138您是否能够在一个数据库中重新创建问题的较小版本。如果您这样做的话，我可以帮助您更好地调试。很抱歉，我需要弄清楚为什么它不能在JSFIDLE中工作。现在，是的，将该功能从循环中移除已经取得了一些进展，单击功能仍然存在，但项目仍然在调整大小时打开。我将尝试其他的解决方案，并将张贴的代码，工作，谢谢你的帮助！

// media query event handler
if (matchMedia) {
  const mq = window.matchMedia("(min-width: 768px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

// media query change
function WidthChange(mq) {
  if (mq.matches) {
    // do what you want when  window width is at least 768px
  } else {
    // do what you want when window width is less than 768px
  }
}