jQuery Impedisce l'attivazione dell'evento genitore quando viene attivato l'evento figlio

Question

Recentemente ho alcuni problemi con jQuery. Diciamo solo che ho elementi come questo:

<div id="parent1" class="parent"> 
    <div id="child1" class="children"> 
     <a href="" id="child_link1" class="child_link"></a> 
    </div> 
</div> 

e ho funzione di jQuery come questo:

$(".parent").click(function(){ 
    alert("parent is clicked"); 
}); 

$(".child_link").click(function(){ 
    alert("child link is clicked"); 
}); 

Se clicco sul child_link, genitore sarà attivato anche. Come posso creare una situazione in cui se faccio clic su child_link, il genitore non verrà attivato?

Answer 1

È necessario fermare la propagazione sull'evento bambino click, in questo modo:

$(".child_link").click(function(e) { 
    e.stopPropagation(); 
    alert("child link is clicked"); 
}); 

Example fiddle

Answer 2

gestore di eventi per il bambino dovrebbe essere scritto in questo modo:

$(".child_link").click(function(event){ 
    event.stopPropagation(); 
    alert("child link is clicked"); 
}); 

Questo sarà stop event bubbling e il gestore dell'evento del genitore non verrà richiamato.

Answer 3

Vedi il tuo evento si sta facendo ribollire fino al suo genitore. Così qui è necessario utilizzare .stopPropagation();:

$(".child_link").click(function(ev){ 
    ev.stopPropagation(); //<----------------this stops the event to bubble up 
    alert("child link is clicked"); 
});