Як зупинити бульбашку подій, натиснувши прапорець

У мене є прапорець, у якому я хочу виконати якусь дію Ajax на події клацання, однак прапорець також знаходиться всередині контейнера зі своєю власною поведінкою натискання, яку я не хочу запускати, коли клацніть прапорець. Цей зразок ілюструє те, що я хочу зробити:

$(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 () vs. return 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();