Dynamiska element, statiska element, händelsehanterare och deras komplexitet

Att arbeta med staplade element på en sida, några som är ankare och andra som är element med händelsehanterare kan ibland orsaka konstigt beteende.

I slutändan har allt att göra med händelseutbredning, men om du inte har behövt ta itu med det (eller händelsebubbling eller något liknande), kan det vara lite av en utmaning.

Och här är ett exempel: Tänk om du har en bild som är inlindad i ett ankare. Vad händer när du har ett dynamiskt element som placeras via JavaScript efter att sidan har laddats som laddar ett annat dynamiskt element? Utöver det vill du stoppa sidan från att omdirigera när det dynamiska elementet klickas men ändå direkt när bilden klickas?

Det kan låta enkelt – och i vissa fall är det det – men om du har ett genomskinligt element som överlagrar hela originalbilden kan det bli en helt annan utmaning.

Det är här att förstå händelsemål kommer in i bilden. Men innan jag går in på hur man löser det, ska jag försöka destillera ner allt till en enklare förklaring och diagram ut hur det renderas i DOM.

Dynamiska element, statiska element och händelsehanterare

Så försök att föreställa dig detta: Du har…

• En sida som har en bild och bilden är inlindad i ett ankare som tar dig till, säg, en annan sida.
• När sidan laddas skapas två dynamiska element. När den första klickas, bör den visa det andra dynamiska elementet.
• När den första dynamiken klickas, bör den inte omdirigera sidan.
• När originalbilden klickas ska den bete sig som förväntat.

Det svåra med detta är att de dynamiska elementen placeras ovanpå den befintliga ankar- och bildkombinationen.

En titt på DOM

Detta betyder att DOM skulle se ut ungefär så här:

Notera i bilden ovanför att ankaret utlöser bilden och det dynamiska elementet utlöser det dynamiska överlägget.

Så hur går vi tillväga för att visa det andra dynamiska elementet när det första klickade utan att navigera bort från sidan? Du kan göra detta genom att undersöka målet för händelsen som utlöstes.

Koden för hantering av händelser

Jag kommer att använda jQuery nedan eftersom de flesta av mina läsare arbetar med WordPress och WordPress levereras med jQuery, men detta kan också hanteras med vanilj JavaScript (men att försöka gå in på den vägen är mer än jag är villig att förklara i just detta posta).

Med det sagt, här är kärnan som jag kommer att förklara vad som händer med koden:

$('.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.
  });
});

Först gör jag antagandet att det finns flera dynamiska element därav orsaken till varje iterator.

Därefter skapar den en referens till ankarelementet som är en förälder till den aktuella instansen av det dynamiska elementet (att använda var här är viktigt så att det alltid refererar till elementet som är föräldern till den aktuella instansen av iterationen kontra att skriva över en tidigare instans ).

När elementet klickas, ställer vi in ​​en klickhanterare så att vi kan ta en titt på målet för händelsen för klickhändelsen. Det är här det blir lite förvirrande.

Vi har e- och evt- variabler som var och en hänvisar till händelsehanteraren för ett specifikt element. I koden ovan:

• e hänvisar till händelsen kopplad till vårt dynamiska element,
• evt hänvisar till elementet men kommer också att påverka händelsebubblingsprocessen vilket innebär att det kommer att utlösa händelser i resten av DOM.

Och därför, i vår villkorliga, utvärderar vi målet för den första händelsehanteraren för att säkerställa att det inte matchar det specifika elementet. Därifrån, som du kan se i kodkommentaren, kan du bestämma hur du vill gå vidare (som att kanske gå vidare och låta den navigera någon annanstans eller göra något annat).

I slutändan är det ditt samtal. Men när du hamnar i en bindning av dynamiska element, statiska element och händelsehanterare kan det snabbt bli komplicerat.