如何在块外发生单击（或鼠标悬停）事件时调用方法？

Question

所以，我有例子。 ：）

第一个，在Facebook上：它是一个三角形（在右上角），带有下拉菜单（其中放置了“退出”，“帮助”，“帐户”设置“按钮”。因此，如果我将光标放在此菜单之外，它将被隐藏。

我做了它（隐藏块onmouseover），但当我将光标放在子元素上时，“mouseover”事件触发。

第二个，vk.com框。如果我在这个框外单击，它将被隐藏（如果所有输入都是空的）。

我做错了：

<div id="box_layer" onclick="this.style.display='none';">
    <div id="box">Boxboxbox</div>
</div>

对于1st，我用谷歌搜索event.cancelBubble=true（也e.stopPropagation()），但我不知道，如何使用它（因为，我是怎么做的，它不起作用）。

再次抱歉我的英语不好。 ：）

谢谢。

Answer 1

如果我理解你的帖子，我认为你需要使用mouseout而不是mouseover。

function forMouseOut(){
    e=window.event;
    if(!e) e=window.Event;
    if(your_block.contains(e.target || e.toElement)) return;// Prevents closing when over child elements
     /* check the inputs and return if empty */
     your_block.style.display='none';
     return;
}

然后我想你根本不需要onclick，因为只要鼠标指针移出它就会关闭your_block。

Answer 2

对于盒子我已经上课，关闭它的功能：

close: function(e,$type,$parameters) { //e is the event
  var el=e.target||e.srcElement;
  if (el.id=='box_wrap' || el.id=='box_layer' || el.id=='closebox_button') {
    box.chooseLayer($type).getElementsByTagName('div')[0].innerHTML=null;
    box.closeLayer($type);
  }
}