Как отменить событие нажатия триггера контейнера div при нажатии элементов, которые внутри контейнера в JQuery?

Question

Например,

<div class="container">
  <div class="inside">I am not fire when click me</div>
</div>

$('.container').click(function(){
  // container do something here
});

, но когда я нажимаю на div внутри, он также вызывает событие click контейнера, потому что div находится внутри контейнера, поэтому мне нужен способ предотвратить триггер события контейнера, когда янажмите на внутренний div!

Большое спасибо !!

Answer 1

В качестве более общего решения вы должны проверить e.target в container обработчике click.

$('.container').click(function(e) {
   // If you want to ignore clicks to anything inside the `.container` div:
   if (!$(e.target).hasClass('container')) return;
   // or, if you only want the `.inside` div to not fire the event,
   if ($(e.target).hasClass('inside')) return;

   // container do something here
});

Таким образом, вы не предотвращаете распространениесобытия, которое сломало бы связанные live обработчики.

Answer 2

$('.inside').click(function(e) {
    e.stopPropagation();
});

Это должно сработать для вас. Он останавливает любой щелчок во внутреннем элементе div от пузыря до контейнера.

Вот и быстрый пример - http://jsfiddle.net/Yf8Ra/1/

Answer 3

Добавьте обработчик события щелчка внутрь, как показано ниже:

$('.inside').click(function(event) {
    // do anything you might want with the click for inside
    return false; // prevents click event from bubbling up the DOM hierarchy
});

В качестве альтернативы event.stopPropagation() также предотвращает образование пузырей следующим образом:

$('.inside').click(function(event) {
    // do anything you might want with the click for inside
    event.stopPropagation(); // prevents click event from bubbling up the DOM hierarchy
});

Эта статья объясняет всплеск событий.