如何捕捉“关闭”点击事件？

Question

这是一个例子。这是谷歌菜单。

当您单击齿轮（红叉）时，会出现菜单。当您单击打开菜单（绿色十字）以外的任何位置时，菜单将消失。问题是如何捕捉第二次结束事件（绿十字）。

打开菜单很简单。

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