jQuery » Sviluppo » Javascript » Internet

Impedire la propagazione degli eventi con jQuery

venerdì 21 agosto, 2009

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:

PLAIN TEXT
HTML:
  1. <div id="box">
  2.  <a id="mylink" href="#">Link</a>
  4.  
  5. <!-- oppure -->
  6.  
  7. <div id="box">
  8.  <!-- contenuto -->
  10. <!-- questo anchor ha gli stili impostati in modo tale da trovarsi in position absolute o relative e quindi sovrapposto al div contenitore -->
  11. <a id="mylink" href="#">Link</a>

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

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

Post correlati

Questo articolo ti è stato utile?: Per nientePocoAbbastanzaMoltoMoltissimo
Loading ... Loading ...

Tags: , , , , ,

Un commento a: “Impedire la propagazione degli eventi con jQuery”

  1. getAvatar 1.0
    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!

    Rispondi Quota

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
[as][/as]           // Actionscript
[css][/css]         // CSS Style Sheet
[html][/html]       // HTML
[js][/js]           // Javascript
[objc][/objc]       // Objective-C
[php][/php]         // PHP
[sql][/sql]         // SQL