Home » Web Development » jQuery » Come fermare la propagazione di un evento con jQuery

Come fermare la propagazione di un evento con jQuery

jquery-logo
Parliamo oggi di un problema abbastanza critico durante la gestione degli eventi con jQuery, o più generalmente con javascript: La propagazione di un evento.

Cosa è la propagazione di un evento javascript?

Spesso nelle pagine web capita di avere degli elementi all’interno di contenitori come nell’esempio:

1
2
3
<div id="contenitore">
    <p id="elemento">Elemento uno</p>
</div>

Ipotiziamo di voler assegnare un handler al click sul contenitore che stampi un alert con messaggio: “Hai cliccatto sul Contenitore”. Mentre al click sull’elemento vogliamo stampare il messaggio: “Hai cliccato sull’Elemento”

I due handler quindi saranno come quelli nell’esempio:

1
2
3
4
5
6
$("#contenitore").click(function(){
    alert("Hai cliccatto sul Contenitore");
});
$("#elemento").click(function(){
    alert("Hai cliccato sull'Elemento");
});

Adesso che abbiamo definito i nostri handler possiamo vederli funzionare andando a cliccare sulla scritta Elemento uno.

Noterete che verrà prima lanciato l’alert che abbiamo definito per il click sull’elemento e subito dopo quello che abbiamo definito per il click sul contenitore. Questo avviene perchè l’evento click si propaga dal figlio (l’elemento) al padre (il contenitore).

In progetti con strutture più articolate, formate da diversi contenitori e a cui vengono assegnati handler per diversi eventi questa propagazione può rivelarsi un problema vero e proprio.

Come fermare la propagazione di un evento javascript?

jQuery ci viene in aiuto fornendoci una funzione: event.stopPropagation()

Grazie a questa funzione l’evento click verrà circoscritto all’interno dell’elemento a cui abbiamo definito l’handler e non si propagherà. Modifichiamo ora l’handler per il click sull’elemento in modo da fermare la propagazione:

4
5
6
7
$("#elemento").click(function(event){
    event.stopPropagation();
    alert("Hai cliccato sull'Elemento");
});

In questo esempio event punta esattamente al nostro evento, in questo caso il click, e la funzione stopPropagation() ne bloccha la propagazione.

Questa funzione è utilizzabile anche con altri tipi di evento come ad esempio il mousedown. Spesso non ci rendiamo conto che un click non è altro che un evento mousedown seguito da un evento mouseup, per cui se nel nostro esempio avessimo definito un handler per il semplice mousedown sul contenitore il click avrebbe scatenato ugualmente quest’altro evento.

Resta sempre aggiornato

Stai tranquillo! Non invio E-mail di Spam e non faccio decine di invi ogni settimana. Ti invierò di tanto in tanto un messaggio per tenerti aggiornato sulle novità e sui nuovi articoli!
Email
Secure and Spam free...