Question

I have examples. 🙂

The first, on Facebook: it’s a triangle (in the top-right corner) with drop-down menu (where are placed "Log out", "Help", "Account Settings" buttons). So, if I’ll place cursor outside this menu, it will be hidden.

I made it (hide block onmouseover), but when I’m placing cursor on child elements, mouseover event triggers.

The second, vk.com boxes. If I’ll click outside this box, it’s will be hidden (if all inputs are empty).

I’m doing wrong:

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

For 1st, I’ve googled event.cancelBubble=true (also e.stopPropagation()), but I don’t know, how to use it (because, how I’m doing it, it doesn’t work).

Answer 1

For boxes I’ve made a class, close function of it:

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