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

enter image description here

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

打开菜单很简单。

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

但是如何使它关闭？我试着用“身体”的标签是这样的：

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

但它已被打开后立即关闭菜单。首先，点击“星号”后变成“块”。但随着身体也被点击，这成为“无”之后。如何解决它？为了捕捉正确的目标事件，编写“body”代码真的有必要吗？

来源

2012-01-17 Green

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

来源

2012-01-17 19:00:47 Raynos

是的，这样的解决方案看起来不错，但“模糊”不能applyed到div元素这么简单，unfurtunatly – Green 2012-01-18 10:21:45

@Green为什么不呢？呃模糊不适用于div。好的，你需要别的东西。看起来你需要一个点击处理程序，并检查点击是否在div – Raynos 2012-01-18 16:42:49

这是由于冒泡/事件传播。 #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"; 
}

来源

2012-01-17 19:03:24 circusbred

之内，使用不带库的内联处理程序并不容易。你是指什么样的图书馆？ jQuery的？ – Green 2012-01-17 20:13:55

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

回答

相关问题