Как остановить всплывающее событие при нажатии флажка

У меня есть флажок, который я хочу выполнить Ajax-действие над событием click, однако флажок также находится внутри контейнера с его собственным поведением щелчка, которое я не хочу запускать при нажатии флажка. Этот пример иллюстрирует то, что я хочу сделать:

$(document).ready(function() {
  $('#container').addClass('hidden');
  $('#header').click(function() {
    if ($('#container').hasClass('hidden')) {
      $('#container').removeClass('hidden');
    } else {
      $('#container').addClass('hidden');
    }
  });
  $('#header input[type=checkbox]').click(function(event) {
    // Do something
  });
});

#container.hidden #body {
  display: none;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="container">
  <div id="header">
    <h1>Title</h1>
    <input type="checkbox" name="test" />
  </div>
  <div id="body">
    <p>Some content</p>
  </div>
</div>

Тем не менее, я не могу понять, как остановить всплывающее окно события, не вызывая поведение щелчка по умолчанию (флажок становится отмеченным / не отмеченным), чтобы не запускаться.

Оба следующих способа останавливают всплывающее окно события, но также не меняют состояние флажка:

event.preventDefault();
return false;

замещать

event.preventDefault();
return false;

с участием

event.stopPropagation();

event.stopPropagation ()

Останавливает передачу события родительским элементам, предотвращая уведомление любых родительских обработчиков о событии.

event.preventDefault ()

Запрещает браузеру выполнять действие по умолчанию. Используйте метод isDefaultPrevented, чтобы узнать, вызывался ли этот метод когда-либо (для этого объекта события).

Используйте метод stopPropagation:

event.stopPropagation();

Не забудьте IE:

if (event.stopPropagation) {    // standard
        event.stopPropagation();
    } else {    // IE6-8
        event.cancelBubble = true;
}

Как уже упоминали другие, попробуйте stopPropagation().

И есть еще один обработчик: event.cancelBubble = true;это специфичный для IE обработчик, но он поддерживается как минимум в FF. Не очень много знаю об этом, так как я сам этим не пользовался, но это может стоить того, если все остальное не поможет.

Это отличный пример для понимания концепции всплытия событий. Исходя из приведенных выше ответов, окончательный код будет выглядеть так, как указано ниже. Когда пользователь нажимает на флажок, распространение события на его родительский элемент 'header' будет прекращено с помощью event.stopPropagation();.

$(document).ready(function() {
            $('#container').addClass('hidden');
            $('#header').click(function() {
                if($('#container').hasClass('hidden')) {
                    $('#container').removeClass('hidden');
                } else {
                    $('#container').addClass('hidden');
                }
            });
          $('#header input[type=checkbox]').click(function(event) {
              if (event.stopPropagation) {    // standard
                   event.stopPropagation();
               } else {    // IE6-8
                    event.cancelBubble = true;
               }
          });     
  });

При использовании jQuery вам не нужно отдельно вызывать функцию остановки.

Вы можете просто вернуться falseв обработчик события

Это остановит событие и отменит барботирование.

Также смотрите event.preventDefault () против возврата false

Из документов JQuery:

Следовательно, эти обработчики могут препятствовать запуску делегированного обработчика путем вызова event.stopPropagation()или возврата false.

Кредит @mehras для кода. Я просто создал фрагмент, чтобы продемонстрировать это, потому что я думал, что это будет оценено, и я хотел найти оправдание, чтобы попробовать эту функцию.

$(document).ready(function() {
  $('#container').addClass('hidden');
  $('#header').click(function() {
    if ($('#container').hasClass('hidden')) {
      $('#container').removeClass('hidden');
    } else {
      $('#container').addClass('hidden');
    }
  });
  $('#header input[type=checkbox]').click(function(event) {
    if (event.stopPropagation) { // standard
      event.stopPropagation();
    } else { // IE6-8
      event.cancelBubble = true;
    }
  });
});

div {
  text-align: center;
  padding: 2em;
  font-size: 1.2em
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header"><input type="checkbox" />Checkbox won't bubble the event, but this text will.</div>
<div id="container">click() bubbled up!</div>

В angularjs это должно работать:

event.preventDefault(); 
event.stopPropagation();