Как изменить hover на click, при адаптиве?

Question

[Дмитрий]

Подскажите пожалуйста, есть скрипт при наведении на ссылку "Țiglă modulară REGLE", появляется блок. Как сделать чтобы при максимальной ширине, например, 1024px другие блоки появлялись по клику только на кнопку "s".

Пример кода ниже:

Answer 1

[Deeno]

let div = document.querySelector("div");

if (window.innerWidth > 768) {
  div.addEventListener("mouseover", function () {
    console.log("works");
  });
} else if (window.innerWidth < 768) {
  div.addEventListener("click", function () {
    console.log("works");
  });
}

Comments

[Stalker_RED]

Обработчик кликов можно бы сделать не анонимным, чтобы не дублировать код.
как-то так:

const isSmallWidth = window.innerWidth < 768;

if (isSmallWidth) {
    div.addEventListener('mouseover', myHandler);
} else {
    div.addEventListener('click', myHandler);
}

function myHandler() {
    console.log("блоки, появитесь!");
}

И else if явно лишний. Обычный else был бы уместнее и заодно захватил бы вариант innerWidth = 768, при котором у вас вообще ничего не сработает.

А если открыть большое окно, а потом уменьшить - продолжит работать как при большом. В общем, одни минусы.

[Deeno]

тогда нужно проверять на resize еще