Как скрывать элемент при клике вне его и вне его потомков?

Question

[Илья Пирожок]

Хочу раз и навсегда понять эту логику. Сам пытался но получается не то. В гугле советы только по jQuery и то все рабтают коряво
Есть кнопка с меню:

<li class="header-action-buttons-wrap">
    <span class="action-button">INFO</span>
    <div class="info-menu-box menu-box">
        <ul>
            <li><a href="#">Где купить</a></li>
            <li><a href="#">Оплата и доставка</a></li>
            <li><a href="#">Контакты</a></li>
            <li><a href="#">О нас</a></li>
        </ul>
    </div>
</li>

Кликая на кнопку action-button мы присваеваем родителю класс active и исходя из этого открывается меню menu-box. Как сделать что ты все это дело скрывалось если кликаем по документу вне всех этих элементов? Спасибо

Answer 1

[Dark Hole]

function click_on_button(e) {
   ...
   e.stopPropagation();
}
function click_on_window(e) {
  $('.active').toggleClass('active');
}

Но мне порекомендовали не использовать stopPropagation... что ж.

var click_on_menu = false;
function menuClick(e) {
  ...
  click_on_menu = true;
}
function documentClick(e) {
  if(click_on_menu) click_on_menu = false;
  else $('active').removeClass('active');
}

Comments

[Илья Пирожок]

Оригинальное решение, такого ещё не встречал

Answer 2

[iBird Rose]

$(document).click( function(event){
		if(( $(event.target).closest(".header-action-buttons-wrap").length ))
		return;
		$('.header-action-buttons-wrap').removeClass('active');
		event.stopPropagation();
	});

Comments

[Сергей]

не сработает, евент сбаблится до родителя .header-action-buttons-wrap после чего скроет его

[Сергей]

а вот если переместить event.stopPropagation(); в начало обработчика, тогда заработает

Answer 3

[Сергей]

делаем два лисенера

$('.header-action-buttons-wrap').click(function(e){
   e.stopPropagation(); //эта строка остановит bubbling события до родительских элементов
   $(this).addClass('active');
})

$('body').click(function(){
   $('.header-action-buttons-wrap').removeClass('active');
})