Dünaamilised elemendid, staatilised elemendid, sündmuste käitlejad ja nende keerukus

Lehe virnastatud elementidega töötamine, millest mõned on ankrud ja teised, mis on sündmuste käitlejatega, võivad mõnikord põhjustada veidrat käitumist.

Lõppkokkuvõttes on see kõik seotud sündmuste levitamisega, kuid kui te pole sellega (või sündmuste mullitamise või muu sellisega) tegelema pidanud, võib see olla väike väljakutse.

Ja siin on näide: mis siis, kui teil on ankrusse mähitud pilt. Mis juhtub, kui sisestate pärast lehe laadimist JavaScripti kaudu dünaamilise elemendi, mis laadib teise dünaamilise elemendi? Peale selle, kas soovite peatada lehe ümbersuunamise, kui dünaamilisel elemendil klõpsatakse, kuid siiski suunamise, kui pildil klõpsate?

See võib tunduda lihtne – ja mõnel juhul on see nii –, kuid kui teil on läbipaistev element, mis katab kogu algse pildi, võib see muutuda hoopis teiseks väljakutseks.

Siin tuleb mängu sündmuste sihtmärkide mõistmine. Kuid enne, kui hakkan seda lahendama, proovin kõik lihtsamaks selgituseks destilleerida ja joonistada diagrammi, kuidas see DOM-is renderdatakse.

Dünaamilised elemendid, staatilised elemendid ja sündmuste käitlejad

Nii et proovige seda ette kujutada: teil on…

• Leht, millel on pilt ja pilt on mähitud ankrusse, mis viib teid näiteks teisele lehele.
• Lehe laadimisel luuakse kaks dünaamilist elementi. Kui klõpsate esimesel, peaks see kuvama teise dünaamilise elemendi.
• Esimesel dünaamikal klõpsamisel ei tohiks see lehte ümber suunata.
• Kui algsel pildil klõpsate, peaks see käituma ootuspäraselt.

Selle raske osa on see, et dünaamilised elemendid asetatakse olemasoleva ankru ja pildi kombinatsiooni peale.

Pilk DOM-ile

See tähendab, et DOM näeks välja umbes selline:

Märkus ülaloleval pildil käivitab ankur pildi ja dünaamiline element käivitab dünaamilise ülekatte.

Kuidas siis kuvada teist dünaamilist elementi, kui esimene klõpsas, ilma lehelt lahkumata? Seda saate teha käivitatud sündmuse sihtmärki uurides.

Sündmuste käsitlemise kood

Kasutan allpool jQueryt, kuna enamik minu lugejaid töötab WordPressiga ja WordPress tarnib jQueryga, kuid seda saab käsitleda ka vanilje JavaScriptiga (kuid sellel teel on rohkem kui ma olen nõus selles konkreetses selgitama postitus).

Seda öeldes selgitan siin koodiga toimuvat sisu:

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

Esiteks, ma eeldan, et dünaamilisi elemente on mitu, seega iga iteraatori põhjus.

Järgmisena loob see viite ankurelemendile, mis on dünaamilise elemendi praeguse eksemplari vanem (var -i kasutamine siin on oluline, et see viitaks alati elemendile, mis on iteratsiooni praeguse eksemplari vanem võrreldes eelmise eksemplari ülekirjutamisega ).

Kui elemendil klõpsatakse, seadistame klikitöötleja, et saaksime vaadata klõpsusündmuse sihtmärki. Siin läheb see natuke segaseks.

Meil on muutujad e ja evt, millest igaüks viitab konkreetse elemendi sündmuste käitlejale. Ülaltoodud koodis:

• e viitab sündmusele, mis on seotud meie dünaamilise elemendiga,
• evt viitab elemendile, kuid mõjutab ka sündmuste mullitamisprotsessi, mis tähendab, et see käivitab sündmusi kogu ülejäänud DOM-is.

Seega hindame tingimuses esimese sündmusekäsitleja sihtmärki, et veenduda, et see ei vasta konkreetsele elemendile. Sealt saate, nagu näete koodi kommentaaris, määrata, kuidas soovite edasi minna (nt kas minna edasi ja lasta sellel mujal liikuda või teha midagi muud).

Lõppkokkuvõttes on see teie kõne. Kui aga sattute dünaamiliste elementide, staatiliste elementide ja sündmuste käitlejate hulka, võib see kiiresti keeruliseks minna.