Javascript-форум - Скрытие блока по клику вне его

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Скрытие блока по клику вне его (https://javascript.ru/forum/misc/84395-skrytie-bloka-po-kliku-vne-ego.html)

Скрытие блока по клику вне его

Привет мир.

Имеем кнопочку:

<div id="kide-menu" class="kide-menu-icon"><i id="bar" class="fa fa-ellipsis-v" aria-hidden="true"></i></div>

при клике на которую срабатывает скрипт:

let kideMenu = document.querySelector('.kide-menu');
    let kideMenuIcon = document.querySelector('#kide-menu');
    kideMenuIcon.addEventListener('click', kideMenuIconClick);

    function kideMenuIconClick() {
        kideMenu.classList.toggle('show-menu');
    }

и отображается / скрывается меню:

<div class="kide-menu">
   меню
</div>

очень бы хотелось скрывать его по клику вне его.
Нашел такой скрипт:

const box = document.querySelector('.kide-menu');
    document.addEventListener('click', (e) => {
        const click = e.composedPath().includes(box);
        if (!click) {
            kideMenu.classList.remove('show-menu');
        }
    });

Вот только теперь при клике на "kide-menu" срабатывает и событие на "document".
Не соображу как добавить в исключения

<div id="kide-menu" class="kide-menu-icon"><i id="bar" class="fa fa-ellipsis-v" aria-hidden="true"></i></div>

:help:

Скрытие блока по клику вне его

Ubivectel,

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        #kide-menu {
            width: 80px;
            height: 24px;
            background-color: #0000FF;
            text-align: center;
        }
        #kide-menu:after {
            content: "click me";
            color: #FFFFFF;
        }
        .kide-menu {
            display: none;
        }
        .kide-menu.show-menu {
            display: block;
        }
    </style>
    <script>
        document.addEventListener('click', ({
            target
        }) => {
            if (target.closest(".kide-menu")) return;
            const kideMenu = document.querySelector('.kide-menu');
            if (target.closest("#kide-menu")) kideMenu.classList.toggle("show-menu");
            else kideMenu.classList.remove("show-menu");
        })
    </script>
</head>
<body>
    <div id="kide-menu" class="kide-menu-icon"><i id="bar" class="fa fa-ellipsis-v" aria-hidden="true"></i></div>
    <div class="kide-menu">
        меню
    </div>
</body>
</html>

Спасибо рони, пошел курить матчасть :victory: