Как поймать клик вне элемента (jQuery)?

logo-jqueryНа сколько вы все знаете, в события распространяются по принципу пузырька — события передается от дочернего к родительскому, до самых до окраин. То есть, любой клик в пределах документа отразится на корневом элементе body.

То есть, берем и попросту сделаем скрытие меню, если событие клика пришло к нему.

$('body').click(function() {
  // Скрыть меню
 });

Но, если кликнем на наше меню, то ничего подобного происходить не должно. То есть, дальше контейнера с меню данные события распространятся не должны.

$('#menuContainer').click(function(event){
    // Клик оказался в пределах?
    // Распространению — нет!
    event.stopPropagation();
 });

Добавлю еще один вариант, которым я пользовался ранее. Принцип действия — проверка родителей элемента перебором, на наличие в нем «знакомых».

$(document).click(function(e) {
  if ($(e.target).parents().filter('#menuContainer').length != 1) {
    $('#menuContainer').hide();
  }
});

Запись навигация

Top