Задать вопрос
  • Как закрывать выпадающее меню при клике вне его самого?

    @everdimension
    Использовать e.stopPropagation() — плохая идея. Читайте

    Правильный способ — проверять, является ли target сделанного клика элементом меню или чем-то другим. Если это не меню — закрывать меню.

    Появляется правильный вопрос, что делать, если кликнутый элемент — дочерний элемент меню? Для этого есть офигенный метод node.contains()

    Собственно, вся требуемая проверка получается совсем несложная — gist
    var el = document.getElementById('el');
    
    document.addEventListener('click', outsideEvtListener);
    
    function outsideEvtListener(evt) {
        if (evt.target === el || el.contains(evt.target)) {
            // клик внутри
            return;
        }
        // код для закрытия меню, например el.classList.add('hidden')
       
        // не забыть убрать слушатель событий (не для каждой имплементации требуется)
        document.removeEventListener(outsideEvtListener);
    }
    Ответ написан
    2 комментария