Как я могу использовать jQuery для определения того, срабатывает ли событие click в определенном элементе?

Я использую следующий код для анимации блока. В моем коде div_animate() по существу скрывает <div> с указанным селектором, если он в настоящее время виден.

$(document).click(function(event){
    div_animate("#container");
});

Мне нужно определить, нажал ли пользователь на дочерний элемент #container, и если да, return false; - насколько я могу судить, код для этого будет выглядеть примерно так:

$(document).click(function(event){
    if ( /* the event target has a parent of #container */ ) {
        return false;
    } else {
        div_animate("#container");
    }
});

Любые мысли?

Ответы

Ответ 1

Самое простое:

if ($(event.target).is('#container *, #container')) // edited - thanks @gnarf
  // is a child
else
  // is not a child

Существуют различные варианты, которые вы могли бы сделать для определения того, является ли это дочерним элементом целевого (или нецелевого) контейнера; что только один. Альтернатива:

if ($(event.target).closest('#container').length)

Ответ 2

Вы можете предотвратить действие, если клик возник или находится в #container, например:

$(document).click(function(event){
    var c = $("#container")[0];
    if (event.target == c || $.contains(c, event.target)) {
        return false;
    } else {
        div_animate("#container");
    }
});

Первая проверка заключается в том, что она получена из #container, вторая - если она получена от дочернего элемента, то #container $.contains(). Совершенно альтернативным, более простым способом является просто предотвратить пузырь до document при нажатии на #container, например:

$("#container").click(function(e) {
  e.stopPropagation();
});
$(document).click(function() {
  div_animate("#container");
});