Come fermare il gorgoglio degli eventi facendo clic sulla casella di controllo

Ho una casella di controllo che voglio eseguire alcune azioni Ajax sull'evento clic, tuttavia la casella di controllo è anche all'interno di un contenitore con il proprio comportamento di clic che non voglio eseguire quando si fa clic sulla casella di controllo. Questo esempio illustra cosa voglio fare:

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

Tuttavia, non riesco a capire come fermare il gorgogliamento dell'evento senza causare la mancata esecuzione del comportamento predefinito del clic (casella di controllo selezionata / deselezionata).

Entrambi i seguenti fermano il gorgoglio degli eventi ma non cambiano lo stato della casella di controllo:

event.preventDefault();
return false;

sostituire

event.preventDefault();
return false;

con

event.stopPropagation();

event.stopPropagation ()

Ferma il gorgogliamento di un evento verso gli elementi padre, impedendo a tutti i gestori genitori di essere avvisati dell'evento.

event.preventDefault ()

Impedisce al browser di eseguire l'azione predefinita. Utilizzare il metodo isDefaultPrevented per sapere se questo metodo è mai stato chiamato (su quell'oggetto evento).

Utilizzare il metodo stopPropagation:

event.stopPropagation();

Non dimenticare IE:

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

Come altri hanno già detto, prova stopPropagation().

E c'è un secondo gestore da provare: event.cancelBubble = true;è un gestore specifico di IE, ma è supportato almeno in FF. Non ne so molto, dato che non l'ho usato da solo, ma potrebbe valere la pena tentare, se tutto il resto fallisce.

Questo è un ottimo esempio per comprendere il concetto di bolle di eventi. Sulla base delle risposte di cui sopra, il codice finale apparirà come indicato di seguito. Se l'utente fa clic sulla casella di controllo, la propagazione dell'evento all'elemento principale "intestazione" verrà interrotta 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;
               }
          });     
  });

Quando si utilizza jQuery non è necessario chiamare una funzione di arresto separata.

Puoi semplicemente tornare falsenel gestore dell'evento

Ciò interromperà l'evento e annullerà il gorgoglio.

Vedi anche event.preventDefault () vs. return false

Dai documenti di jQuery:

Questi gestori, pertanto, possono impedire l'attivazione del gestore delegato chiamando event.stopPropagation()o restituendo false.

Ringraziamo @mehras per il codice. Ho appena creato uno snippet per dimostrarlo perché pensavo che sarebbe stato apprezzato e volevo una scusa per provare quella funzione.

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

In angularjs dovrebbe funzionare:

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