Реализация всплывающего окна при наведении на элемент и закрытие окна при уводе курсора с элемента, а также с раскрывшегося окна?

Question

[roma3928]

Я написал код, который реализует данный функционал, но проблема заключается в том, что съедает очень много ресурсов, что весь сайт начинает подвисать. И не могу найти причину данного провисания. При этом countryModal не является соседом и ребенком country-js, поэтому с помощью css это реализовать невозможно.

<ul class="header__list">
    <li class="header__item">
        <a class="header__link header__link--tourists" href="#">Туристам <span class="arrow-decor"></span></a>
        <div class="header-dropdown__tourists">
            <ul class="header-dropdown__list">
                <li class="header-dropdown__item"><a href="">Поиск туров</a></li>
                <li class="header-dropdown__item"><a href="">Горящие туры</a></li>
                <li class="header-dropdown__item"><a href="">Ранее бронирование 2023</a></li>
                <li class="header-dropdown__item"><a href="">Цены дня</a></li>
                <li class="header-dropdown__item"><a href="">Страны и Отели</a></li>
                <li class="header-dropdown__item"><a href="">Как купить тур онлайн</a></li>
                <li class="header-dropdown__item"><a href="">Личный кабинет</a></li>
            </ul>
        </div>
    </li>
    <li class="header__item header__item-company">
        <a class="header__link" href="#">О компании <span class="arrow-decor"></span></a>
        <div class="header-dropdown__company">
            <ul class="header-dropdown__list">
                <li class="header-dropdown__item"><a href="">Реквизиты</a></li>
                <li class="header-dropdown__item"><a href="">Где купить</a></li>
                <li class="header-dropdown__item"><a href="">Наши награды</a></li>
            </ul>
        </div>
    </li>
    <li class="header__item">
        <a class="header__link" href="#">Контакты</a>
        <span class="link-decor"></span>
    </li>
    <li class="header__item country-js">
        <a class="header__link" href="#">Страны <span class="arrow-decor"></span></a>
    </li>
</ul>                      
 <div class="country-modal" id="countryModal">
...
 </div>

const countryModalBtn = document.querySelector(".country-js");
    const countryModal = document.getElementById("countryModal");

    function openDropdown() {
        countryModal.classList.add("country-modal--active");
    }

    function closeDropdown(event) {
        const relatedTarget = event.relatedTarget;
        const isRelatedTargetInsideModal = countryModal.contains(relatedTarget);
        const isRelatedTargetInsideButton = countryModalBtn.contains(relatedTarget);

        if (!isRelatedTargetInsideModal && !isRelatedTargetInsideButton) {
            countryModal.classList.remove("country-modal--active");
        }
    }
    countryModalBtn.addEventListener("mouseover", openDropdown);
    countryModalBtn.addEventListener("mouseout", closeDropdown);
    countryModal.addEventListener("mouseout", closeDropdown);

.country-modal {
    position: absolute;
    left: 0;
    right: 0;
    top: 91px;
    z-index: 1000;
    background-color: #fff;
    border-top: 1px solid #dedede;
    opacity: 0;
    visibility: hidden;
    overflow-y: auto;
    transition: opacity .3s ease-in-out, visibility .3s ease-in-out;

    &--active {
        opacity: 1;
        visibility: visible;
    }
}

Comments

[szQocks]

выложи нормальный код на codepen

countryModalCloseBtn- это мы сами ищи да ?

opacity: 0;
    visibility: hidden;
    overflow-y: auto;

- это тоже сами гадайте где моё окно

[roma3928]

szQocks, первый пункт исправил, скопировал случайно, по второму пункту не пойму в чем проблема. Это код scss, country-modal находится в самом низу кода html

[szQocks]

roma3928, какие подвисания ? опиши их, я их не вижу

[szQocks]

roma3928, изначально когда я глянул код, подумал что ты постоянно события вешаешь, ну торопно глянул код, потом увидел что ты их вешаешь всего 1 раз, но может быть только здесь ты их повесил 1 раз а там в твоём полноценном коде, ты их постоянно вешаешь и не удаляешь, а из кода который ты показал прямо тут у тебя 3 события и всё что ты делаешь - удаляешь и добавляешь класса, что тут глючить может ?

[roma3928]

szQocks, нет в моем коде все также, подвисания смотрю activity monitor при наведении - нагрузка на CPU взлетает с 8% до 40%, вот и думаю в чем проблема

Answer 1

[imko]

Событие mouseover это движение мыши, тебе нужен mouseenter - вход

Answer 2

[gogowq]

const countryModalBtn = document.querySelector(".country-js");
const countryModal = document.getElementById("countryModal");
let timeoutId;

function openDropdown() {
    clearTimeout(timeoutId);
    countryModal.classList.add("country-modal--active");
}

function closeDropdown() {
    timeoutId = setTimeout(function() {
        countryModal.classList.remove("country-modal--active");
    }, 200); 
}

countryModalBtn.addEventListener("mouseover", openDropdown);
countryModalBtn.addEventListener("mouseout", closeDropdown);
countryModal.addEventListener("mouseout", closeDropdown);