Использовать
e.stopPropagation()
— плохая идея.
Читайте
Правильный способ — проверять, является ли
target
сделанного клика элементом меню или чем-то другим. Если это не меню — закрывать меню.
Появляется правильный вопрос, что делать, если кликнутый элемент — дочерний элемент меню? Для этого есть офигенный метод
node.contains()
Собственно, вся требуемая проверка получается совсем несложная —
gistvar 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);
}