Cómo evitar que un niño afecte al padre

Question

¿Cómo evitar que el elemento NIÑO afecte al elemento PADRE?

jQuery:

$("#parent").click(function() { 
    alert('parent clicked'); 
}); 
$("#child").click(function() { 
    alert('child clicked'); 
}); 

HTML:

<div id="parent"> 
    click me - parent 
    <div id="child">click me - child</div> 
</div> 

Si hace clic en el niño, los padres también se activa y tenemos 2 alertas.

Entonces, ¿cómo puedo evitar que el niño afecte al padre?

Answer 1

event.stopPropagation()

$("#child").click(function(event) { 

    event.stopPropagation(); 

    alert('child clicked'); 
}); 

Calling event.stopPropagation() detendrá el caso de burbujeando el árbol DOM.

Answer 2

Esto se llama event bubbling o event propagation. Esto se puede evitar agregando e.stopPropagation() en su código. Si también quieres detener el comportamiento predeterminado, simplemente hazlo: return false;.

return false; básicamente hace ambos: e.stopPropagation() y e.preventDefault(). Lo que puede ser útil si usa etiquetas <a> por ejemplo y desea evitar que la página se aleje después de un clic.