Impedire la propagazione degli eventi con jQuery

Due elementi del DOM HTML sovrapposti, entrambi sensibili ad un evento click, soffrono dell’annoso problema della propagazione degi eventi tra gli strati del DOM stesso: il cosidetto event bubbling. Questo comportamento (che ritroviamo anche in altri ambienti di sviluppo: vedi Actionscript 3.0: MovieClip over MovieClip) è di per se utile in moltissimi casi. Tuttavia, in altri, genera non pochi problemi. Ad esempio immaginiamo di avere un div contenitore sensibile all’evento click. Sovrapposto a questo troviamo un classico link anchor a. Cliccando sul link oltre al “cambio pagina” scatterà l’evento associato al div contenitore. Per impedire la propagazione dell’evento click dall’anchor a al div contenitore, possiamo usare jQuery in questo modo:

1
2
3
4
5
6
7
8
9
10
11
<div id="box">
 <a id="mylink" href="#">Link</a>
</div>

<!-- oppure -->

<div id="box">
 <!-- contenuto -->
</div>
<!-- questo anchor ha gli stili impostati in modo tale da trovarsi in position absolute o relative e quindi sovrapposto al div contenitore -->
<a id="mylink" href="#">Link</a>

Tramite jQuery è possibile impedire che l’evento click sul tag anchor a si propaghi agli elementi sottostanti:

1
2
3
4
5
6
7
$('a#mylink').click(
    function(event) {
        document.location = event.target.href;
        event.stopPropagation();
        event.preventDefault();
    }
);

Un commento a: “ ”

  1. 07 ott, 2009 Matteo:

    Ciao,

    qualcuno mi conferma che il codice nel post funziona? Mi servirebbe impedire che i link del primo livello del mio menu multilivello facciano aprire una nuova pagina (creo il menu con le funzioni di WordPress, quindi non posso togliere i link), ovvero: cliccando sui link di primo livello deve solo apparire il sottomenu (che faccio apparire con jqueryslidemenu, ma questo è un altro discorso… :) )
    Grazie!

    RispondiQuota

Lascia un commento

TAG XHTML PERMESSI: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> INSERIMENTO CODICE: 
<pre></pre> // blocco generico
                   <code></code> // blocco generico
                   [cc_actionscript][/cc_actionscript] // Actionscript
                   [cc_actionscript3][/cc_actionscript3] // Actionscript 3
                   [cc_css][/cc_css] // CSS Style Sheet
                   [cc_html][/cc_html] // HTML
                   [cc_js][/cc_js] // Javascript
                   [cc_objc][/cc_objc] // Objective-C
                   [cc_php][/cc_objc] // PHP
                   [cc_sql][/cc_sql] // SQL