Dynaamiset elementit, staattiset elementit, tapahtumakäsittelijät ja niiden monimutkaisuudet

Sivulla pinottujen elementtien käsittely, joista osa on ankkureita ja toiset tapahtumakäsittelijillä, voi joskus aiheuttaa outoa käyttäytymistä.

Loppujen lopuksi se kaikki liittyy tapahtumien leviämiseen, mutta jos et ole joutunut käsittelemään sitä (tai tapahtumakuplaa tai muuta vastaavaa), se voi olla pieni haaste.

Ja tässä on esimerkki: Entä jos sinulla on kuva, joka on kääritty ankkuriin. Mitä tapahtuu, kun dynaaminen elementti sijoitetaan JavaScriptin kautta sivun latautumisen jälkeen, joka lataa toisen dynaamisen elementin? Lisäksi haluat estää sivua uudelleenohjaamasta, kun dynaamista elementtiä napsautetaan, mutta silti ohjaamasta, kun kuvaa napsautetaan?

Se saattaa kuulostaa yksinkertaiselta – ja joissain tapauksissa sitä onkin – mutta jos sinulla on läpinäkyvä elementti koko alkuperäisen kuvan päällä, siitä voi tulla aivan toinen haaste.

Tässä tulee esiin tapahtumakohteiden ymmärtäminen. Mutta ennen kuin käsittelen sen ratkaisemista, yritän tislata kaiken yksinkertaisemmalle selitykselle ja kaavion, kuinka se renderöidään DOM:ssa.

Dynaamiset elementit, staattiset elementit ja tapahtumakäsittelijät

Joten yritä kuvitella tämä: Sinulla on…

• Sivu, jolla on kuva ja kuva on kääritty ankkuriin, joka vie sinut esimerkiksi toiselle sivulle.
• Kun sivu latautuu, luodaan kaksi dynaamista elementtiä. Kun ensimmäistä napsautetaan, sen pitäisi näyttää toinen dynaaminen elementti.
• Kun ensimmäistä dynamiikkaa napsautetaan, sen ei pitäisi ohjata sivua uudelleen.
• Kun alkuperäistä kuvaa napsautetaan, sen tulee toimia odotetulla tavalla.

Vaikeinta tässä on, että dynaamiset elementit sijoitetaan olemassa olevan ankkuri- ja kuvayhdistelmän päälle.

Katso DOM

Tämä tarkoittaa, että DOM näyttäisi suunnilleen tältä:

Huomaa yllä olevassa kuvassa, että ankkuri laukaisee kuvan ja dynaaminen elementti dynaamisen peittokuvan.

Miten sitten näytetään toinen dynaaminen elementti, kun ensimmäinen napsautettiin siirtymättä pois sivulta? Voit tehdä tämän tutkimalla käynnistetyn tapahtuman kohdetta.

Tapahtumien käsittelykoodi

Käytän alla jQueryä, koska useimmat lukijani työskentelevät WordPressin kanssa ja WordPress toimitetaan jQueryn kanssa, mutta tämä voidaan käsitellä myös vanilja-JavaScriptilla (mutta yrittää mennä tälle tielle on enemmän kuin olen valmis selittämään tässä lähettää).

Tämän sanottuani tässä on ydin, jonka selitän, mitä koodille tapahtuu:

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

Ensin teen oletuksen, että dynaamisia elementtejä on useita, mistä syystä kunkin iteraattorin syy.

Seuraavaksi se luo viittauksen ankkurielementtiin, joka on dynaamisen elementin nykyisen ilmentymän emo (var :n käyttö tässä on tärkeää, jotta se viittaa aina elementtiin, joka on iteroinnin nykyisen ilmentymän emo, verrattuna edellisen ilmentymän päällekirjoitukseen ).

Kun elementtiä napsautetaan, asetamme napsautuskäsittelijän, jotta voimme katsoa napsautustapahtuman kohdetta. Tässä menee vähän hämmentäväksi.

Meillä on e- ja evt- muuttujat, joista jokainen viittaa tietyn elementin tapahtumakäsittelijään. Yllä olevassa koodissa:

• e viittaa tapahtumaan, joka on sidottu dynaamiseen elementtiimme,
• evt viittaa elementtiin, mutta se vaikuttaa myös tapahtumien kuplitusprosessiin, mikä tarkoittaa, että se käynnistää tapahtumia koko muun DOM:n ajan.

Ja näin ollen ehtolausekkeessamme arvioimme ensimmäisen tapahtumakäsittelijän kohteen varmistaaksemme, että se ei vastaa tiettyä elementtiä. Sieltä, kuten näet koodikommentista, voit määrittää, miten haluat edetä (esimerkiksi ehkä mennä eteenpäin ja antaa sen navigoida muualle tai tehdä jotain muuta).

Lopulta se on sinun puhelusi. Mutta kun pääset joukkoon dynaamisia elementtejä, staattisia elementtejä ja tapahtumakäsittelijöitä, siitä voi tulla nopeasti monimutkainen.