如果屏幕宽度大于，如何在调整大小和加载时停止单击事件？

Question

我一遍又一遍地面临这个问题，只是不知道如何解决这个问题。 我有一个单击事件，只有当屏幕宽度小于 **576px* 并且加载页面以使此事件触发时，我才想触发该事件。

但是当我将浏览器的大小调整为大于576 像素时，点击事件仍然有效。

有人可以帮我解决我面临的这个常见问题吗？

提前致谢。

我的代码：

const onSearchMobile = () => {
    let screenWidth = window.innerWidth;
    let searchIcon = document.querySelector('.main-header__search--icon');
    if (screenWidth <= 576) {
        console.log('Yes lower then 576');
        searchIcon.addEventListener('click', () => {
            console.log('clicked!');
        });
    }
};

window.addEventListener('resize', onSearchMobile, false);
window.addEventListener('load', onSearchMobile);

Answer 1

只需检查事件内部的width

const onSearchMobile = () => {
  let screenWidth = window.innerWidth;
  let searchIcon = document.querySelector('.main-header__search--icon');
  searchIcon.addEventListener('click', () => {
    if (screenWidth <= 576) {
      console.log('clicked!');
    }
  });
};

window.addEventListener('resize', onSearchMobile, false);
window.addEventListener('load', onSearchMobile);

使用MediaQueryList.onchange

let searchIcon = document.querySelector('.main-header__search--icon')
let clickListener = () => console.log('clicked!')
let mql = window.matchMedia('(max-width: 576px)')

mql.addEventListener("change", (e) => {
  if (e.matches) {
    searchIcon.addEventListener('click', clickListener)
  } else {
    searchIcon.removeEventListener('click', clickListener)
  }
})

Answer 2

您可以删除事件监听器：

    const onSearchMobile = () => {
    let screenWidth = window.innerWidth;
    let searchIcon = document.querySelector('.main-header__search--icon');
    if (screenWidth <= 576) {
        console.log('Yes lower then 576');
        searchIcon.addEventListener('click', () => {
            console.log('clicked!');
        });
    }
    else {
        searchIcon.removeEventListener('click');
    }
};

window.addEventListener('resize', onSearchMobile, false);
window.addEventListener('load', onSearchMobile);