javascript - Cómo detener el burbujeo del evento al hacer clic en la casilla de verificación
evento click javascript (8)
Tengo una casilla de verificación que quiero realizar alguna acción de 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 encontrar la manera de detener el burbujeo del evento sin hacer que el comportamiento del clic predeterminado (casilla de verificación activada / desactivada) no se ejecute.
Ambas cosas detienen el burbujeo del evento pero tampoco cambian el estado de la casilla de verificación:
event.preventDefault();
return false;
Al usar jQuery, no necesita llamar a una función de detención por separado.
Puede return false en el controlador de eventos
Esto detendrá el evento y cancelará el burbujeo.
Ver también:
event.preventDefault () vs. return false
De los documentos jQuery:
Estos manejadores, por lo tanto, pueden evitar que el manejador delegado se dispare llamando a event.stopPropagation () o devolviendo falso.
Como han mencionado otros, 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.
Crédito a por el código. Acabo de crear un fragmento para demostrarlo porque pensé que sería apreciado y quería una excusa para probar 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 funcionar:
event.preventDefault();
event.stopPropagation();
Este es un excelente ejemplo para entender el concepto de burbujeo del evento. En función de las respuestas anteriores, el código final se verá como se menciona a continuación. Cuando el usuario event.stopPropagation(); en la casilla de verificación, la propagación del evento a su elemento principal ''encabezado'' se detendrá utilizando 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;
}
});
});
No te olvides de IE:
if (event.stopPropagation) { // standard
event.stopPropagation();
} else { // IE6-8
event.cancelBubble = true;
}
Use el método stopPropagation:
event.stopPropagation();
reemplazar
event.preventDefault();
return false;
con
event.stopPropagation();
event.stopPropagation ()
Detiene el borboteo de un evento a elementos principales, lo que impide que se notifique a ningún controlador principal del evento.
event.preventDefault ()
Impide que el navegador ejecute la acción predeterminada. Utilice el método isDefaultPrevented para saber si este método alguna vez se llamó (en ese objeto de evento).