Come impedire al bambino di influenzare il genitore

Question

Come impedire che l'elemento CHILD influenzi l'elemento PARENT?

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> 

Se si sceglie il bambino, il genitore è anche attivato e abbiamo 2 avvisi.

Quindi, come posso impedire al bambino di influenzare il genitore?

Answer 1

event.stopPropagation()

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

    event.stopPropagation(); 

    alert('child clicked'); 
}); 

Calling event.stopPropagation() si fermerà l'evento dalla zampillante l'albero DOM.

Answer 2

Questo è chiamato event bubbling o event propagation. Questo può essere evitato aggiungendo e.stopPropagation() nel tuo codice. Se vuoi anche interrompere il comportamento predefinito, puoi semplicemente fare: return false;.

return false; fondamentalmente fa entrambi: e.stopPropagation() e e.preventDefault(). Che può essere utile se si utilizzano i tag <a> ad esempio e si desidera impedire che la pagina si allontani dopo un clic.