Javascript:根据屏幕分辨率调用不同的函数

Question

我想根据屏幕分辨率调用两个不同的函数。我用这段代码做到了这一点，但是当用户更改宽度浏览器时参数不会改变。有人能帮我吗？这是代码:

var width=document.body.clientWidth;

function onresize(e) {
  
   width = e.target.outerWidth;
  
   console.log("width 1 is "+ width)
   
}
window.addEventListener("resize", onresize);

console.log("width is "+ width)

if(width>787){
  srcBtn.addEventListener("click", open)
  cls.addEventListener("click", closeBanner)
}else{
  srcBtn.addEventListener("click", divSearch)
}

Answer 1

将监听器分配包装到一个函数中(这也会删除旧监听器)。然后首先在初始化时调用该函数，然后在调整大小时调用该函数。

var width=document.body.clientWidth;
var srcBtn = document.getElementById('srcBtn');

function onresize(e) {
    width = document.body.clientWidth;
    console.log("width 1 is "+ width);
    setListeners();
}
window.addEventListener("resize", onresize);
console.log("width is "+ width);
setListeners();

function setListeners(){
    if(width>490){
        srcBtn.removeEventListener("click", divSearch);
        srcBtn.addEventListener("click", open);
//  cls.addEventListener("click", closeBanner);
    }else{
        srcBtn.removeEventListener("click", open);
        srcBtn.addEventListener("click", divSearch);
    }
}

function open () {
    console.log('open');
}
function divSearch () {
    console.log('divSearch');
}

<button id="srcBtn">click me</button>