Cómo detener la propagación de eventos en la casilla de verificación
Tengo una casilla de verificación que deseo 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. Esta muestra ilustra lo que quiero hacer:
<html lang="en">
<head>
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(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
});
});
</script>
<style type="text/css">
#container.hidden #body {
display:none;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Title</h1>
<input type="checkbox" name="test" />
</div>
<div id="body">
<p>Some content</p>
</div>
</div>
</body>
</html>
Sin embargo, no puedo descubrir cómo detener el burbujeo del evento sin causar que el comportamiento de clic predeterminado (casilla de verificación que se marca o no) no se ejecute.
Ambos de los siguientes detienen la propagación de eventos, pero tampoco cambian el estado de la casilla de verificación:
event.preventDefault();
return false;