Lavorare con elementi impilati su una pagina, alcuni che sono ancoraggi e altri che sono elementi con gestori di eventi a volte pu\u00f2 causare comportamenti strani.<\/p>\n
In definitiva, ha tutto a che fare con la propagazione degli eventi, ma se non hai avuto a che fare con quello (o con il bubbling di eventi o qualcosa del genere), pu\u00f2 essere un po’ una sfida.<\/p>\n
Ed ecco un esempio: cosa succede se hai un’immagine che \u00e8 avvolta in un’ancora. Cosa succede quando un elemento dinamico posizionato tramite JavaScript dopo il caricamento della pagina carica un altro elemento dinamico? Inoltre, si desidera impedire il reindirizzamento della pagina quando si fa clic sull’elemento dinamico ma si desidera comunque effettuare un reindirizzamento diretto quando si fa clic sull’immagine?<\/p>\n
Potrebbe sembrare semplice \u2013 e in alcuni casi lo \u00e8 \u2013 ma se hai un elemento trasparente che si sovrappone all’intera immagine originale pu\u00f2 diventare un’altra sfida.<\/p>\n
\u00c8 qui che entra in gioco la comprensione degli obiettivi degli eventi. Ma prima di entrare nel modo in cui risolverlo, cercher\u00f2 di distillare tutto in una spiegazione pi\u00f9 semplice e di illustrare come viene visualizzato nel DOM.<\/p>\n
Quindi prova a immaginare questo: hai…<\/p>\n
La parte difficile di questo \u00e8 che gli elementi dinamici sono posizionati sopra l’ancora esistente e la combinazione di immagini.<\/p>\n
Ci\u00f2 significa che il DOM sarebbe simile a questo:<\/p>\n
Nota nell’immagine sopra l’ ancora<\/strong> attiva l’ immagine<\/strong> e l’ elemento dinamico<\/strong> attiva la sovrapposizione dinamica<\/strong>.<\/p>\n Quindi, come possiamo visualizzare il secondo elemento dinamico quando il primo ha fatto clic senza uscire dalla pagina? Puoi farlo esaminando la destinazione dell’evento che \u00e8 stato attivato.<\/p>\n User\u00f2 jQuery di seguito poich\u00e9 la maggior parte dei miei lettori lavora con WordPress e WordPress viene fornito con jQuery, ma questo pu\u00f2 anche essere gestito con JavaScript vanilla (ma provare a percorrere quella strada \u00e8 pi\u00f9 di quanto io sia disposto a spiegare in questo particolare inviare).<\/p>\n Detto questo, ecco il succo di cui spiegher\u00f2 cosa sta succedendo con il codice:<\/a><\/strong><\/p>\n Innanzitutto, presumo che ci siano pi\u00f9 elementi dinamici, quindi il motivo di ciascun<\/a> iteratore.<\/p>\nIl Codice per la Gestione degli Eventi<\/h3>\n
$('.acme-element').each(function(e) { \n var $anchor = $(this).parents('a');\n $(this).on('click', function(evt) {\n if(e.target !== this) {\n evt.preventDefault();\n }\n \/\/ Here, you may want to action to redirect to an original anchor.\n });\n});<\/code><\/pre>\n