Как правильно разделить выполнение JS кода на мобилках и десктопах?

Question

[Grione]

Довольно простой вопрос.
Есть меню на сайте и код JS который с ним взаимодействует. Если десктоп то мы навешиваем событие mouseover, а если мобилки то click. Но требуется так же учитывать resize окна браузера.

Сейчас у меня это выглядит примерно вот так:

const openSub = document.querySelector('.menu-item-has-children');
if (window.innerWidth > 992) { 
openSub.addEventListener('mouseover', () => {
				openSub.classList.contains('is-hover') 
				});
} else {
openSub.addEventListener('click', () => {
				openSub.classList.contains('is-open') 
				});
}

window.addEventListener('resize', () => { 
if (window.innerWidth > 992) { 
openSub.addEventListener('mouseover', () => {
				openSub.classList.contains('is-hover') 
				});
} else {
openSub.addEventListener('click', () => {
				openSub.classList.contains('is-open') 
				});
}
}

Я код очень упростил, но думаю суть понятно. И вот такое решение оно некорректное, т.к. если мы ресайзим, то в любом случае у нас не отменяется первое условие.

Answer 1

[Воващ]

Resize Observer

Comments

[Grione]

А разве в моём случае Window.matchMedia() не более подходящее решение?

[citizen55]

а в вашем случае не получиться, что вы будете на планшет ставить mouseover событие?

[Grione]

citizen55, click на планшете. Но это же неважно.

[citizen55]

Получите в начале работы скрипта, флаг мобильное это устройство или пк. Для этого погуглите detect device.

Разделите файлы обрабатывающие мобильные и десктоп события, запускайте их в зависимости от флага, дальше скорее всего особых сложностей не возникнет.