Cómo detener la propagación de eventos al hacer clic en la casilla de verificación
Tengo una casilla de verificación en la que quiero realizar alguna acción Ajax en el evento de clic, sin embargo, la casilla de verificación también está dentro de un contenedor con su propio comportamiento de clic que no quiero ejecutar cuando se hace clic en la casilla de verificación. Este ejemplo ilustra lo que quiero hacer:
$(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="https://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>Sin embargo, no puedo encontrar la manera de detener la propagación del evento sin provocar que no se ejecute el comportamiento de clic predeterminado (la casilla de verificación se marca/desmarca).
Las dos opciones siguientes detienen la propagación del evento, pero tampoco cambian el estado de la casilla de verificación:
event.preventDefault();
return false;
reemplazar
event.preventDefault();
return false;
con
event.stopPropagation();
evento.stopPropagation()
Detiene la difusión de un evento a los elementos principales, evitando que los controladores principales sean notificados del evento.
evento.preventDefault()
Impide que el navegador ejecute la acción predeterminada. Utilice el método isDefaultPrevented para saber si alguna vez se llamó a este método (en ese objeto de evento).
