Att arbeta med staplade element p\u00e5 en sida, n\u00e5gra som \u00e4r ankare och andra som \u00e4r element med h\u00e4ndelsehanterare kan ibland orsaka konstigt beteende.<\/p>\n
I slut\u00e4ndan har allt att g\u00f6ra med h\u00e4ndelseutbredning, men om du inte har beh\u00f6vt ta itu med det (eller h\u00e4ndelsebubbling eller n\u00e5got liknande), kan det vara lite av en utmaning.<\/p>\n
Och h\u00e4r \u00e4r ett exempel: T\u00e4nk om du har en bild som \u00e4r inlindad i ett ankare. Vad h\u00e4nder n\u00e4r du har ett dynamiskt element som placeras via JavaScript efter att sidan har laddats som laddar ett annat dynamiskt element? Ut\u00f6ver det vill du stoppa sidan fr\u00e5n att omdirigera n\u00e4r det dynamiska elementet klickas men \u00e4nd\u00e5 direkt n\u00e4r bilden klickas?<\/p>\n
Det kan l\u00e5ta enkelt \u2013 och i vissa fall \u00e4r det det \u2013 men om du har ett genomskinligt element som \u00f6verlagrar hela originalbilden kan det bli en helt annan utmaning.<\/p>\n
Det \u00e4r h\u00e4r att f\u00f6rst\u00e5 h\u00e4ndelsem\u00e5l kommer in i bilden. Men innan jag g\u00e5r in p\u00e5 hur man l\u00f6ser det, ska jag f\u00f6rs\u00f6ka destillera ner allt till en enklare f\u00f6rklaring och diagram ut hur det renderas i DOM.<\/p>\n
S\u00e5 f\u00f6rs\u00f6k att f\u00f6rest\u00e4lla dig detta: Du har…<\/p>\n
Det sv\u00e5ra med detta \u00e4r att de dynamiska elementen placeras ovanp\u00e5 den befintliga ankar- och bildkombinationen.<\/p>\n
Detta betyder att DOM skulle se ut ungef\u00e4r s\u00e5 h\u00e4r:<\/p>\n
Notera i bilden ovanf\u00f6r att ankaret<\/strong> utl\u00f6ser bilden<\/strong> och det dynamiska elementet<\/strong> utl\u00f6ser det dynamiska \u00f6verl\u00e4gget<\/strong>.<\/p>\n S\u00e5 hur g\u00e5r vi tillv\u00e4ga f\u00f6r att visa det andra dynamiska elementet n\u00e4r det f\u00f6rsta klickade utan att navigera bort fr\u00e5n sidan? Du kan g\u00f6ra detta genom att unders\u00f6ka m\u00e5let f\u00f6r h\u00e4ndelsen som utl\u00f6stes.<\/p>\n Jag kommer att anv\u00e4nda jQuery nedan eftersom de flesta av mina l\u00e4sare arbetar med WordPress och WordPress levereras med jQuery, men detta kan ocks\u00e5 hanteras med vanilj JavaScript (men att f\u00f6rs\u00f6ka g\u00e5 in p\u00e5 den v\u00e4gen \u00e4r mer \u00e4n jag \u00e4r villig att f\u00f6rklara i just detta posta).<\/p>\n Med det sagt, h\u00e4r \u00e4r k\u00e4rnan som jag kommer att f\u00f6rklara vad som h\u00e4nder med koden:<\/a><\/strong><\/p>\n F\u00f6rst g\u00f6r jag antagandet att det finns flera dynamiska element d\u00e4rav orsaken till varje<\/a> iterator.<\/p>\n D\u00e4refter skapar den en referens till ankarelementet<\/strong> som \u00e4r en f\u00f6r\u00e4lder till den aktuella instansen av det dynamiska elementet (att anv\u00e4nda var<\/a> h\u00e4r \u00e4r viktigt s\u00e5 att det alltid refererar till elementet som \u00e4r f\u00f6r\u00e4ldern till den aktuella instansen av iterationen kontra att skriva \u00f6ver en tidigare instans ).<\/p>\n N\u00e4r elementet klickas, st\u00e4ller vi in \u200b\u200ben klickhanterare<\/strong> s\u00e5 att vi kan ta en titt p\u00e5 m\u00e5let f\u00f6r h\u00e4ndelsen f\u00f6r klickh\u00e4ndelsen. Det \u00e4r h\u00e4r det blir lite f\u00f6rvirrande.<\/p>\n Vi har e-<\/strong> och evt-<\/strong> variabler som var och en h\u00e4nvisar till h\u00e4ndelsehanteraren f\u00f6r ett specifikt element. I koden ovan:<\/p>\n Och d\u00e4rf\u00f6r, i v\u00e5r villkorliga, utv\u00e4rderar vi m\u00e5let f\u00f6r den f\u00f6rsta h\u00e4ndelsehanteraren f\u00f6r att s\u00e4kerst\u00e4lla att det inte matchar det specifika elementet. D\u00e4rifr\u00e5n, som du kan se i kodkommentaren, kan du best\u00e4mma hur du vill g\u00e5 vidare (som att kanske g\u00e5 vidare och l\u00e5ta den navigera n\u00e5gon annanstans eller g\u00f6ra n\u00e5got annat).<\/p>\n I slut\u00e4ndan \u00e4r det ditt samtal. Men n\u00e4r du hamnar i en bindning av dynamiska element, statiska element och h\u00e4ndelsehanterare kan det snabbt bli komplicerat.<\/p>\nKoden f\u00f6r hantering av h\u00e4ndelser<\/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\n