Как отловить обратное событие "click" ?
 

Вот есть меню у Гугла (см. картинку)



Открывается только когда нажмешь на звездочку (красный крестик). А закрывается, когда кликаешь где угодно за пределами открытого меню (зеленый крестик). Так вот вопрос. Как найти этот зеленый крестик, второй клик, чтоб закрывать меню?

Открыть просто. Можно например так:

var x = document.getElementById("star");                // это id звездочки
var y = document.getElementById("hiddenMenu");          // это id меню, у которого 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";
   }
}

Но получается, что он его только открыв, тут же и прячет. То есть сначала присваивает "block", так как кликнули по "star", но и тут же присваивает "none", так как кликнули и по "body".

Я пока вижу решение такое: написать код отлавливания нужного таргета события для body (отсекать все ненужные элементы). Но это какой-то прямой простецкий путь. Мне кажется, что должно быть какое-то другое решение, более лаконичное. Ведь так на body может висеть уйма разных меню и других захлопывающихся элементов. Неужели на body все их нужно тогда вешать? В общем, как это можно реализовать иначе?

Сделать прозрачный див на всю страницу и повесить на него событие закрытия меню?

1. Events bubbling и events capturing
2. На body навешивать событие onclick только при клике по звездочке\крестику, а потом когда пользователь где нибудь кликает по боди менять видимость меню и снимать событие с body и так далее.