Блог

Главная - Вопросы по программированию - Удалить событие щелчка только в определенном представлении браузера

Удалить событие щелчка только в определенном представлении браузера

#javascript #click #removeeventlistener

Вопрос:

У меня есть переключатель, отображающий содержимое. Я пытаюсь удалить его событие щелчка в окне браузера размером более 600 пикселей. Это означает, что функция переключения щелчка не должна работать в увеличенном виде 600 пикселей. Ниже приведен код, который я использовал.

HTML:

 <div class="trigger">Trigger</div>
<div class="content">This is the Toggle Displaying content</div>
 
 let trigger = document.querySelector(".trigger");
let content = document.querySelector(".content");

mobilefunction=(el)=>{
let cs = window.getComputedStyle(el).display;
if(cs==="none") {el.style.display="block"}
else {el.style.display="none";}
}

responsivemenu=()=> {
let windowwidth = window.innerWidth;
if(windowwidth < 500) {
    trigger.addEventListener("click", ()=>{mobilefunction(content)});
}
else {
    trigger.removeEventListener("click", ()=>{mobilefunction(content)});
}
}

window.addEventListener("resize", responsivemenu );
responsivemenu();

Я пытаюсь включить событие Click только в мобильном устройстве и удалить его для рабочего стола. Обращаюсь за помощью к экспертам по этому вопросу. заранее спасибо!

Ответ №1:

Я бы рекомендовал не добавлять/удалять список событий, а просто проверять обратный вызов прослушивателя. Сделав это, вы можете удалить все обработчики изменения размера, так как ширина проверяется при первом щелчке мыши.

 let trigger = document.querySelector(".trigger");
let content = document.querySelector(".content");

mobilefunction = () => {
  if (window.innerWidth >= 500) {
    return;
  }

  let cs = window.getComputedStyle(content).display;
  if (cs === "none") {
    content.style.display = "block"
  } else {
    content.style.display = "none";
  }
}

trigger.addEventListener("click", mobilefunction); 
 <div class="trigger">Trigger</div>
<div class="content">This is the Toggle Displaying content</div>

Комментарии:

1. Шонер, Привет, Фабиан, Замечательно! Спасибо за вашу большую помощь. Не могли бы вы помочь мне понять логику, которую вы здесь использовали. На самом деле, как я понял, после заявления «возврат» ничего не сработает. Но здесь все работает как по волшебству. Надеюсь, здесь вы использовали основную логику JS. Если вы сможете обучить меня логике. Это было бы полезно.

2. Конечно! return; заставляет функцию возвращать пустое значение, что заставляет функцию останавливаться прямо здесь, возвращать пустое значение и пропускать остальную часть функции. НО этот оператор return инкапсулирован в предложение if (я добавил в свой код соответствующие скобки, чтобы сделать это более понятным), поэтому return; оператор выполняется только в том случае, если условие window.innerWidth >= 500 имеет значение true. В противном случае return; оператор НЕ выполняется, и функция продолжает работать (что в данном случае означает скрытие/отображение content элемента).

3. Привет, Фабиан, Это действительно отличное твое объяснение, и встреча с тобой-это самое ценное. Поскольку в течение долгого времени я использовал jQuery, а теперь из-за того, что Интернет движется с большинством JavaScript, я также двигался вместе с ним. Теперь я использую только Vanilla JS вместо jQuery, и у меня улучшился рейтинг Google PSI и пользовательский опыт. Пожалуйста, ожидайте от меня больше сомнений, так как я действительно ищу такого эксперта, как вы, для консультаций по моим работам.

Метки: