javascript - 如果屏幕宽度大于，如何停止调整大小和加载时的点击事件？

Question

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

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

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

提前致谢。

我的代码:

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

只需检查事件内的宽度

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