Как поймать «закрытие» события click?

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"; 
    } 
} 

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

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"; 
}