jquery impide que el niño active el evento principal
Tengo un div al que le he adjuntado un onclickevento. en este div hay una etiqueta con un enlace. Cuando hago clic en el enlace, onclicktambién se activa el evento del div. ¿Cómo puedo desactivar esto para que si se hace clic en el enlace en el div onclickno se active?
guion:
$(document).ready(function(){
$(".header").bind("click", function(){
$(this).children(".children").toggle();
});
})
código HTML:
<div class="header">
<a href="link.html">some link</a>
<ul class="children">
<li>some list</li>
</ul>
</div>
Aceptado
Hacer esto:
$(document).ready(function(){
$(".header").click(function(){
$(this).children(".children").toggle();
});
$(".header a").click(function(e) {
e.stopPropagation();
});
});
Si desea leer más sobre .stopPropagation(), mire aquí .
O, en lugar de tener un controlador de eventos adicional para evitar otro controlador, puede usar el argumento Objeto de evento pasado a su controlador de eventos de clic para determinar si se hizo clic en un niño. targetserá el elemento en el que se hizo clic y currentTargetserá el .header div:
$(".header").click(function(e){
//Do nothing if .header was not directly clicked
if(e.target !== e.currentTarget) return;
$(this).children(".children").toggle();
});
