Как сделать так, чтобы 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');
});
  • Вопрос задан
  • 823 просмотра
Решения вопроса 1
wapster92
@wapster92 Куратор тега JavaScript

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

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

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

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

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