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

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

---

var-width=document.body.clientWidth；
函数onresize（e）{
宽度=e.target.outerWidth；
console.log（“宽度1为”+宽度）
}
addEventListener（“resize”，onresize）；
console.log（“宽度为”+宽度）
如果（宽度>787）{
srcBtn.addEventListener（“单击”，打开）
cls.addEventListener（“单击”，关闭横幅）
}否则{
srcBtn.addEventListener（“单击”，divSearch）
}

您也需要在事件内部使用

clientWidth

：

width = document.body.clientWidth;

var-width=document.body.clientWidth；
函数onresize（e）{
宽度=document.body.clientWidth；
console.log（“宽度1为”+宽度）
}
addEventListener（“resize”，onresize）；
console.log（“宽度为”+width）

您也需要在事件内部使用

clientWidth

：

width = document.body.clientWidth;

var-width=document.body.clientWidth；
函数onresize（e）{
宽度=document.body.clientWidth；
console.log（“宽度1为”+宽度）
}
addEventListener（“resize”，onresize）；
log（“width is”+width）

将侦听器分配包装到一个函数中（该函数还删除旧的侦听器）。然后在初始化时首先调用此函数，然后在调整大小时调用此函数

---

var-width=document.body.clientWidth；
var srcBtn=document.getElementById（'srcBtn'）；
函数onresize（e）{
宽度=document.body.clientWidth；
console.log（“宽度1为”+宽度）；
setListeners（）；
}
addEventListener（“resize”，onresize）；
console.log（“宽度为”+宽度）；
setListeners（）；
函数setListeners（）{
如果（宽度>490）{
srcBtn.removeEventListener（“单击”，divSearch）；
srcBtn.addEventListener（“单击”，打开）；
//cls.addEventListener（“单击”，关闭横幅）；
}否则{
srcBtn.removeEventListener（“单击”，打开）；
srcBtn.addEventListener（“单击”，divSearch）；
}
}
函数打开（）{
console.log（'open'）；
}
函数divSearch（）{
console.log（'divSearch'）；
}

---

单击我

将您的侦听器分配包装到一个函数中（这也会删除旧的侦听器）。然后在初始化时首先调用此函数，然后在调整大小时调用此函数

---

var-width=document.body.clientWidth；
var srcBtn=document.getElementById（'srcBtn'）；
函数onresize（e）{
宽度=document.body.clientWidth；
console.log（“宽度1为”+宽度）；
setListeners（）；
}
addEventListener（“resize”，onresize）；
console.log（“宽度为”+宽度）；
setListeners（）；
函数setListeners（）{
如果（宽度>490）{
srcBtn.removeEventListener（“单击”，divSearch）；
srcBtn.addEventListener（“单击”，打开）；
//cls.addEventListener（“单击”，关闭横幅）；
}否则{
srcBtn.removeEventListener（“单击”，打开）；
srcBtn.addEventListener（“单击”，divSearch）；
}
}
函数打开（）{
console.log（'open'）；
}
函数divSearch（）{
console.log（'divSearch'）；
}

---

单击我

在我看来，您似乎并不真正需要

调整大小

您只需在

onClick

方法中添加文档宽度测试：

function isWide() {return document.body.clientWidth > 787}

srcBtn.addEventListener("click", function(e) {
  if( isWide() ) { open(e) } else { divSearch(e) } 
});

cls.addEventListener("click", function(e) {
  if( isWide() ) { open(e) }
});

---

在我看来，您并不真正需要

调整大小

您只需在

onClick

方法中添加文档宽度测试：

function isWide() {return document.body.clientWidth > 787}

srcBtn.addEventListener("click", function(e) {
  if( isWide() ) { open(e) } else { divSearch(e) } 
});

cls.addEventListener("click", function(e) {
  if( isWide() ) { open(e) }
});

---

谁是

srcBtn

？您缺少一些代码

var width=document.body.clientWidth在调整大小时不会在代码中更新；Javascript中没有可观察的东西。当宽度改变时，您不会改变事件侦听器。谁是
srcBtn
？您缺少一些代码
var width=document.body.clientWidth在调整大小时不会在代码中更新；Javascript中没有可观察的东西。当宽度改变时，你不会改变事件监听器。是的！我根据OP的代码回答，但你的解决方案显然是聪明的！我根据OP的代码回答，但你的解决方案显然更聪明