¿Cómo atrapar el evento de "cierre"?

Question

Aquí hay un ejemplo. Este es el menú de Google.

Cuando hace clic en la rueda de engranajes (Cruz Roja), aparece el menú. Cuando hace clic en cualquier lugar más allá del menú abierto (Green Cross), el menú desaparece. La pregunta es cómo atrapar ese segundo evento de cierre (Cross Green).

Es simple abrir el menú.

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

¿Pero cómo hacerlo? Intenté de esta manera usando la etiqueta "cuerpo":

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

Pero el menú está cerrado inmediatamente después de que se haya abierto. Primero se convierte en "Bloque" a medida que se hace clic "Star". Pero inmediatamente después de esto se convierte en "ninguno", ya que también se hace clic en el cuerpo. ¿Cómo resolverlo? ¿Es realmente necesario escribir código para el "cuerpo" para atrapar el evento objetivo correcto?