Sivulla pinottujen elementtien k\u00e4sittely, joista osa on ankkureita ja toiset tapahtumak\u00e4sittelijill\u00e4, voi joskus aiheuttaa outoa k\u00e4ytt\u00e4ytymist\u00e4.<\/p>\n
Loppujen lopuksi se kaikki liittyy tapahtumien levi\u00e4miseen, mutta jos et ole joutunut k\u00e4sittelem\u00e4\u00e4n sit\u00e4 (tai tapahtumakuplaa tai muuta vastaavaa), se voi olla pieni haaste.<\/p>\n
Ja t\u00e4ss\u00e4 on esimerkki: Ent\u00e4 jos sinulla on kuva, joka on k\u00e4\u00e4ritty ankkuriin. Mit\u00e4 tapahtuu, kun dynaaminen elementti sijoitetaan JavaScriptin kautta sivun latautumisen j\u00e4lkeen, joka lataa toisen dynaamisen elementin? Lis\u00e4ksi haluat est\u00e4\u00e4 sivua uudelleenohjaamasta, kun dynaamista elementti\u00e4 napsautetaan, mutta silti ohjaamasta, kun kuvaa napsautetaan?<\/p>\n
Se saattaa kuulostaa yksinkertaiselta \u2013 ja joissain tapauksissa sit\u00e4 onkin \u2013 mutta jos sinulla on l\u00e4pin\u00e4kyv\u00e4 elementti koko alkuper\u00e4isen kuvan p\u00e4\u00e4ll\u00e4, siit\u00e4 voi tulla aivan toinen haaste.<\/p>\n
T\u00e4ss\u00e4 tulee esiin tapahtumakohteiden ymm\u00e4rt\u00e4minen. Mutta ennen kuin k\u00e4sittelen sen ratkaisemista, yrit\u00e4n tislata kaiken yksinkertaisemmalle selitykselle ja kaavion, kuinka se render\u00f6id\u00e4\u00e4n DOM:ssa.<\/p>\n
Joten yrit\u00e4 kuvitella t\u00e4m\u00e4: Sinulla on\u2026<\/p>\n
Vaikeinta t\u00e4ss\u00e4 on, ett\u00e4 dynaamiset elementit sijoitetaan olemassa olevan ankkuri- ja kuvayhdistelm\u00e4n p\u00e4\u00e4lle.<\/p>\n
T\u00e4m\u00e4 tarkoittaa, ett\u00e4 DOM n\u00e4ytt\u00e4isi suunnilleen t\u00e4lt\u00e4:<\/p>\n
Huomaa yll\u00e4 olevassa kuvassa, ett\u00e4 ankkuri<\/strong> laukaisee kuvan<\/strong> ja dynaaminen elementti<\/strong> dynaamisen peittokuvan<\/strong>.<\/p>\n Miten sitten n\u00e4ytet\u00e4\u00e4n toinen dynaaminen elementti, kun ensimm\u00e4inen napsautettiin siirtym\u00e4tt\u00e4 pois sivulta? Voit tehd\u00e4 t\u00e4m\u00e4n tutkimalla k\u00e4ynnistetyn tapahtuman kohdetta.<\/p>\n K\u00e4yt\u00e4n alla jQuery\u00e4, koska useimmat lukijani ty\u00f6skentelev\u00e4t WordPressin kanssa ja WordPress toimitetaan jQueryn kanssa, mutta t\u00e4m\u00e4 voidaan k\u00e4sitell\u00e4 my\u00f6s vanilja-JavaScriptilla (mutta yritt\u00e4\u00e4 menn\u00e4 t\u00e4lle tielle on enemm\u00e4n kuin olen valmis selitt\u00e4m\u00e4\u00e4n t\u00e4ss\u00e4 l\u00e4hett\u00e4\u00e4).<\/p>\n T\u00e4m\u00e4n sanottuani t\u00e4ss\u00e4 on ydin, jonka selit\u00e4n, mit\u00e4 koodille tapahtuu:<\/a><\/strong><\/p>\n Ensin teen oletuksen, ett\u00e4 dynaamisia elementtej\u00e4 on useita, mist\u00e4 syyst\u00e4 kunkin<\/a> iteraattorin syy.<\/p>\nTapahtumien k\u00e4sittelykoodi<\/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