Отслеживание событий в javascript

Рейтинг: 1Ответов: 1Опубликовано: 08.02.2023

Всем доброго времени суток!

Пишу небольшой скрипт переключения активной картинки у объектов недвижимости, по типу как сделано в Яндекс недвижимости (https://realty.ya.ru/sevastopol/kupit/kvartira/odnokomnatnaya/novostroyki/), двигаем мышкой на объявлении, изменяется активная картинка, если картинки закончились показываем тёмную область где пишется сколько картинок ещё в полном описании.

Моя верстка и скрипт - https://codepen.io/iwan-klepalskij/pen/QWBREXa

Проблема заключается в том, что когда становится активной область с надписью сколько картинок в полном описании, я не знаю как отследить дальнейшие движения мышкой на блоке который должен переключать картинки. В моем скрипте эта область становится активной вот здесь

  if(bulletIndicators[pIndex].classList.contains('more_photo')){
    galleryShowMore.classList.add('active');
    //а вот здесь проблема, как отследить дальнейшие движения на элементе pTileItem, если galleryShowMore перекрывает его....
    }

Подскажите как ловить события при дальнейших движениях на объекте который перекрывается этим элементом. Т.е. прятать эту темную область и показывать активные картинки согласно наведению на них.

javascript javascript-events mouse-event
Источник: Stack Overflow на русском

Ответы

▲ 1

А задачка решилась простым добавлением z-index к классу p-tile__item, теперь "тёмный" элемент не перекрывает навигацию по картинкам и в прослушивании события pTileItem.addEventListener('mouseenter') добавляем

 if(bulletIndicators[pIndex].classList.contains('more_photo')){
   galleryShowMore.classList.add('active');
 }else{
   galleryShowMore.classList.remove('active');
 }

https://codepen.io/iwan-klepalskij/pen/QWBREXa

Буду признателен старшим братьям по разуму за мой код ревью :)