Я хочу вызвать две разные функции в зависимости от разрешения экрана. Я сделал это с этим кодом, но параметры не меняются, когда пользователь меняет ширину браузера. Кэнд, кто-нибудь поможет мне? Это код:

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)
}
0
Doina Bostan 21 Авг 2018 в 11:56

3 ответа

Лучший ответ

Оберните свое назначение слушателя в функцию (которая также удаляет старых слушателей). Затем вызовите эту функцию сначала при инициализации, а затем при изменении размера.

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>
1
scraaappy 21 Авг 2018 в 09:40

Мне кажется, что вам не нужен resize.

Вы можете просто добавить тест ширины документа в ваши 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) }
});
1
Arthur 21 Авг 2018 в 10:23

Вам также нужно использовать clientWidth внутри события:

width = document.body.clientWidth;
var width = document.body.clientWidth;

function onresize(e) {

  width = document.body.clientWidth;

  console.log("width 1 is " + width)

}
window.addEventListener("resize", onresize);

console.log("width is " + width)
0
Zakaria Acharki 21 Авг 2018 в 08:59
51945074