Elementi dinamici, elementi statici, gestori di eventi e loro complessità

Lavorare con elementi impilati su una pagina, alcuni che sono ancoraggi e altri che sono elementi con gestori di eventi a volte può causare comportamenti strani.

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ò essere un po’ una sfida.

Ed ecco un esempio: cosa succede se hai un’immagine che è 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?

Potrebbe sembrare semplice – e in alcuni casi lo è – ma se hai un elemento trasparente che si sovrappone all’intera immagine originale può diventare un’altra sfida.

È qui che entra in gioco la comprensione degli obiettivi degli eventi. Ma prima di entrare nel modo in cui risolverlo, cercherò di distillare tutto in una spiegazione più semplice e di illustrare come viene visualizzato nel DOM.

Elementi dinamici, elementi statici e gestori di eventi

Quindi prova a immaginare questo: hai…

• Una pagina che ha un’immagine e l’immagine è avvolta in un’ancora che ti porterà, ad esempio, a un’altra pagina.
• Quando la pagina viene caricata, vengono creati due elementi dinamici. Quando si fa clic sul primo, dovrebbe visualizzare il secondo elemento dinamico.
• Quando si fa clic sulla prima dinamica, non dovrebbe reindirizzare la pagina.
• Quando si fa clic sull’immagine originale, dovrebbe comportarsi come previsto.

La parte difficile di questo è che gli elementi dinamici sono posizionati sopra l’ancora esistente e la combinazione di immagini.

Uno sguardo al DOM

Ciò significa che il DOM sarebbe simile a questo:

Nota nell’immagine sopra l’ ancora attiva l’ immagine e l’ elemento dinamico attiva la sovrapposizione dinamica.

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 è stato attivato.

Il Codice per la Gestione degli Eventi

Userò jQuery di seguito poiché la maggior parte dei miei lettori lavora con WordPress e WordPress viene fornito con jQuery, ma questo può anche essere gestito con JavaScript vanilla (ma provare a percorrere quella strada è più di quanto io sia disposto a spiegare in questo particolare inviare).

Detto questo, ecco il succo di cui spiegherò cosa sta succedendo con il codice:

$('.acme-element').each(function(e) { 
  var $anchor = $(this).parents('a');
  $(this).on('click', function(evt) {
    if(e.target !== this) {
      evt.preventDefault();
    }
    // Here, you may want to action to redirect to an original anchor.
  });
});

Innanzitutto, presumo che ci siano più elementi dinamici, quindi il motivo di ciascun iteratore.

Successivamente, crea un riferimento all’elemento anchor che è un genitore dell’istanza corrente dell’elemento dinamico (l’uso di var qui è importante in modo che faccia sempre riferimento all’elemento che è il genitore dell’istanza corrente dell’iterazione rispetto alla sovrascrittura di un’istanza precedente ).

Quando si fa clic sull’elemento, impostiamo un gestore di clic in modo da poter dare un’occhiata alla destinazione dell’evento dell’evento clic. Qui è dove diventa un po’ confuso.

Abbiamo variabili e ed evt ciascuna delle quali si riferisce al gestore di eventi per un elemento specifico. Nel codice sopra:

• e si riferisce all’evento legato al nostro elemento dinamico,
• evt si riferisce all’elemento ma influenzerà anche il processo di bubbling degli eventi, il che significa che attiverà eventi nel resto del DOM.

E quindi, nel nostro condizionale, valutiamo la destinazione del primo gestore di eventi per assicurarci che non corrisponda all’elemento specifico. Da lì, come puoi vedere nel commento al codice, puoi determinare come vuoi procedere (come magari andare avanti e lasciarlo navigare altrove o fare qualcos’altro).

Alla fine è la tua chiamata. Ma quando entri in un legame di elementi dinamici, elementi statici e gestori di eventi, può complicarsi rapidamente.