Cómo detener el burbujeo del evento al hacer clic en la casilla de verificación

Use el método stopPropagation:

event.stopPropagation();

Como otros han mencionado, intente stopPropagation().

Y hay un segundo controlador para probar: event.cancelBubble = true;es un controlador específico de IE, pero es compatible al menos con FF. Realmente no sé mucho al respecto, ya que no lo he usado, pero podría valer la pena, si todo lo demás falla.

No se olvide de IE:

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

Este es un excelente ejemplo para entender el concepto de eventos burbujeante. Con base en las respuestas anteriores, el código final se verá así como se menciona a continuación. Cuando el usuario hace clic en la casilla de verificación de propagación evento para 'cabecera' su elemento padre será dejado de usar 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;
               }
          });     
  });

Cuando se utiliza jQuery que no es necesario llamar a una función de parada separado ..

Usted puede simplemente return falseen el controlador de eventos

Esto detendrá el evento y cancelar burbujeo ..

Ver también:

event.preventDefault () return false vs.

A partir de la documentación de jQuery:

Estos controladores, por lo tanto, pueden impedir que el manejador delegado de activación llamando event.stopPropagation () o devolver falsa.

Crédito para @mehras para el código. Acabo de crear un fragmento de demostrar porque pensé que sería apreciada y quería una excusa para tratar esa característica.

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

En AngularJS esto debería trabajos:

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