Как вызвать метод (ы), когда событие click (или mouseover) произошло за пределами блока?

Question

Итак, у меня есть примеры. :)

Первое, на фейсбуке: это треугольник (в правом верхнем углу) с выпадающим меню (где размещены «Выход», «Справка», «Настройки аккаунта»). «кнопки» . Поэтому, если я наведу курсор за пределы этого меню, оно будет скрыто.

Я сделал это (скрыть блок onmouseover), но когда я помещаю курсор на дочерние элементы, срабатывает событие "mouseover".

Вторые ящики vk.com. Если я нажму за пределами этого поля, оно будет скрыто (если все входные данные пусты).

Я делаю неправильно:

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

Во-первых, я гуглил event.cancelBubble=true (также e.stopPropagation()), но я не знаю, как его использовать (потому что, как я это делаю, он не работает).

Снова извините за мой плохой английский. :)

Спасибо.

Answer 1

Для ящиков я создал класс, закройте его функцию:

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

Answer 2

Если я правильно понял ваш пост, думаю, вам нужно использовать 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;
}

Тогда, я полагаю, вам вообще не понадобится нажатие на кнопку, потому что your_block закроется, как только указатель мыши выйдет из нее.