Come smettere di bubbling degli eventi sulla casella di click

Utilizzare il metodo stopPropagation:

event.stopPropagation();

Come altri hanno detto, provare stopPropagation().

E c'è un secondo gestore di provare: event.cancelBubble = true;E 'un gestore specifico IE, ma è supportato in almeno FF. In realtà non so molto su di esso, come non ho usato io stesso, ma forse vale la pena un colpo, se tutto il resto fallisce.

Non dimenticare di IE:

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

Questo è un ottimo esempio per capire bubbling degli eventi concetto. Sulla base delle risposte di cui sopra, il codice finale sarà simile a come indicato di seguito. In cui l'utente clicca sulla casella propagazione evento 'intestazione' suo elemento genitore verrà smesso di utilizzare 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 d'arresto separato ..

Si può solo return falsenel gestore di eventi

Questo fermerà l'evento ed annullare bubbling ..

Vedi anche:

event.preventDefault () vs. return false

Dalla documentazione jQuery:

Questi gestori, quindi, possono evitare che il gestore delegato da innescare chiamando event.stopPropagation () o di ritorno falso.

Credito al @mehras per il codice. Ho appena creato un frammento di dimostrare perché ho pensato che sarebbe stato apprezzato e ho voluto una scusa per provare questa 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 questo dovrebbe opere:

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