Question

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

问题在于，下面的代码在刷新页面的地方有效，并且存在所需的结果。但是，在调整浏览器大小时，如果处于所需宽度以下，则浏览器将处于可单击状态，或者在所需宽度上处于不可单击状态。

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

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

EDIT 更新了部分解决方案的代码。

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

Answer 1

每次调整窗口大小时，都需要更新viewPort的值。目前，viewPort在加载页面时已初始化，但再也不会重新初始化。为此，您可以将resize事件监听器添加到window：

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

Answer 2

您需要在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);
        }
    });

}

Answer 3

Matchmedia可以处理此问题-并在媒体（窗口）符合条件时允许javascript函数。

可在此处（https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia）和此处（https://www.sitepoint.com/javascript-media-queries/）找到参考

有效地，它对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
  }
}

删除事件侦听器并重置classList以调整大小

3 个答案: