Как отловить «закрывающее» событие клика?

Question

Вот пример.Это меню Google.

При нажатии на шестерню (красный крестик) появляется меню.При нажатии в любом месте за пределами открытого меню (зеленый крестик) меню исчезает.Вопрос в том, как поймать это второе закрывающее событие (зеленый крестик).

Меню открыть просто.

var x = document.getElementById("star");          // this is id of the gear-wheel;
var y = document.getElementById("hiddenMenu");    // this is id of the menu with display = none;
x.onclick = function() {
    y.style.display = "block";
}

Но как его закрыть?Я попробовал этот способ, используя тег «body»:

var bar = document.getElementsByTagName("body")[0];
bar.onclick = function() {
    if (y.style.display == "block") {
       y.style.display = "none";
    }
}

Но меню закрывается сразу после его открытия.Сначала это становится "блоком", поскольку "звезда" нажата.Но сразу после этого становится «нет», так как тело также щелкают.Как это решить?Действительно ли необходимо писать код для "body" для отлова нужного целевого события?

Answer 1

star.addEventListener("click", closeIfOpen);
document.addEventListener("click", closeIfClickOutsideMenu);

Answer 2

Это связано с пузырьками / распространением событий.Слушатель на #star сначала срабатывает, затем событие всплывает в теле, и оно срабатывает там.К сожалению, это не особенно легко, используя встроенные обработчики без библиотеки.

var x = document.getElementById("star");          // this is id of the gear-wheel;
var y = document.getElementById("hiddenMenu");    // this is id of the menu with display = none;
x.onclick = function(e) {
    e = e || window.event;
    if (e.stopPropagation) {
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }

    y.style.display = "block";
}