Закрывающиеся меню по клику на свободное место?

Question

[Dolerum]

Доброго времени суток.
Проблема заключается вот в чем;
Нужно, чтобы js отлавливал клик по пустому месту вне меню и автоматически закрывал его. Сколько не пытался, ничего не получается. Что я делаю неправильно?
Публикую js и отрывок html

<div id="help" class="help-me">
		   <h1 class="">Dashwood contempt on mr unlocked resolved provided of of.</h1>
</div>

const mainMenu = document.getElementById('main-menu');
const windowHelp = document.getElementById('help');
windowHelp.addEventListener('click', function(event){
	if (event.target != mainMenu && event.target.parentNode != mainMenu && mainMenu.classList.contains("nav-wrapper--opened")){
		setTimeout(() => { mainMenu.classList.remove('nav-wrapper--opened') }, 5000)
}
});

Comments

[Ankhena]

//закрытие по клику мимо окна
        //хак для ИЕ, чтобы работал closest и matches
        (function(evt) {
            evt.matches = evt.matches || evt.mozMatchesSelector || evt.msMatchesSelector || evt.oMatchesSelector || evt.webkitMatchesSelector;
            evt.closest = evt.closest || function closest(selector) {
                if (!this) return null;
                if (this.matches(selector)) return this;
                if (!this.parentElement) {return null}
                else return this.parentElement.closest(selector)
            };
        }(Element.prototype));
        //end хак для ИЕ

    document.addEventListener("mouseup", function (evt) {
        if (evt.target.closest('.modal') === null) {
            closepopup();
        }
    });

function closepopup() {
        тут то как вы закрываете меню/модалку
        добавляете/убираете классы и т.д.
    }

[Dolerum]

Ankhena, уже неактуально. Но вам спасибо. Вы натолкнули на мысль, что нужно было 'mouse up' задавать, а не клик.

Answer 1

[Артем]

Вот здесь уже решали похожую проблему. Только у вас не модальное окно, но принцип действия тот же. Вешаете обработчик на подложку или на контент сайта
Модальное окно на чистом JS — что можно использовать кроме объекта window?

Comments

[Dolerum]

у меня с display: none верстка ведет себя очень странно. в идеале мне бы класс удалить по клику

[Артем]

Dolerum, https://developer.mozilla.org/ru/docs/Web/API/Elem...

[Dolerum]

Артем, что вы хотели сказать этой ссылкой? Я знаю что такой класс.лист, спасибо.

[Артем]

Dolerum, вместо исправления свойства display, вы можете удалить или добавить класс с помощью classList