Как сделать так, чтобы addEventListener mouseover срабатывал корректно?

Имеем 10 элементов в ряд и код:

document.addEventListener('mouseover', (event) => {

    if (event.target.matches('.catalog-popup__one-link'))
	{
		document.querySelector('.catalog-popup__one-link_active').classList.remove('catalog-popup__one-link_active');
		event.target.classList.add('catalog-popup__one-link_active');
    }
});


Но при быстром перемещении мыши по элементам не всегда выполняется действие. Что сделать, как изменить чтобы событие отрабатывалось на каждом элементе?

Аналогичный код на jQuery отрабатывает корректно:

$(document).on('mouseover', '.catalog-popup__one-link', function(){

	$('.catalog-popup__one-link_active').removeClass('catalog-popup__one-link_active');
	$(this).addClass('catalog-popup__one-link_active');
});
  • Вопрос задан
  • 130 просмотров
Решения вопроса 1
wapster92
@wapster92 Куратор тега JavaScript
Люблю трилогию ME

Используй непосредственно .classList.contains() он по любому быстрее, чем el.matches()

UPD у тебя глюки потому что ты используешь строку
document.querySelector('.catalog-popup__one-link_active').classList.remove('catalog-popup__one-link_active');
Если есть два элемента с классом актив, то второй останется за бортом по этому и не убирается класс.

Нужно либо document.querySelectorAll() или как у меня вешать второе событие. На сколько быстрее каждый из вариантов не знаю.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы