Jak zatrzymać propagację zdarzeń po kliknięciu pola wyboru

Mam pole wyboru, które chcę wykonać akcję Ajax na zdarzeniu kliknięcia, jednak pole wyboru znajduje się również w kontenerze z własnym zachowaniem kliknięcia, którego nie chcę uruchamiać po kliknięciu tego pola wyboru. Ten przykład ilustruje to, co chcę zrobić:

$(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>

Nie mogę jednak wymyślić, jak zatrzymać propagację zdarzenia bez spowodowania, że ​​domyślne zachowanie kliknięcia (pole wyboru zostanie zaznaczone / odznaczone) nie zostanie uruchomione.

Oba poniższe elementy zatrzymują propagację zdarzeń, ale również nie zmieniają stanu pola wyboru:

event.preventDefault();
return false;

zastąpić

event.preventDefault();
return false;

z

event.stopPropagation();

event.stopPropagation ()

Zatrzymuje propagowanie zdarzenia do elementów nadrzędnych, zapobiegając powiadamianiu o zdarzeniu przez wszystkie procedury nadrzędne.

event.preventDefault ()

Uniemożliwia przeglądarce wykonanie domyślnej akcji. Użyj metody isDefaultPrevented, aby dowiedzieć się, czy ta metoda została kiedykolwiek wywołana (dla tego obiektu zdarzenia).

Użyj metody stopPropagation:

event.stopPropagation();

Nie zapomnij o IE:

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

Jak wspomnieli inni, spróbuj stopPropagation().

Do wypróbowania jest drugi moduł obsługi: event.cancelBubble = true;jest to moduł obsługi specyficzny dla IE, ale jest obsługiwany przynajmniej w FF. Naprawdę niewiele o nim wiem, bo sam go nie użyłem, ale może warto spróbować, jeśli wszystko inne zawiedzie.

To doskonały przykład zrozumienia koncepcji propagacji zdarzeń. W oparciu o powyższe odpowiedzi końcowy kod będzie wyglądał jak wspomniano poniżej. Gdy użytkownik kliknie pole wyboru, propagacja zdarzeń do elementu nadrzędnego „nagłówek” zostanie zatrzymana 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;
               }
          });     
  });

Podczas korzystania z jQuery nie trzeba osobno wywoływać funkcji zatrzymania.

Możesz po prostu wrócić falsew module obsługi zdarzeń

To zatrzyma wydarzenie i anuluje propagację.

Zobacz także event.preventDefault () vs. return false

Z dokumentów jQuery:

Te procedury obsługi mogą zatem uniemożliwiać delegowanie procedury obsługi przez wywołanie event.stopPropagation()lub powrót false.

Kredyt dla @mehras kodu. Właśnie stworzyłem fragment kodu, aby to zademonstrować, ponieważ myślałem, że będzie to mile widziane i chciałem wymówki, by wypróbować tę funkcję.

$(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>

W angularjs powinno to działać:

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