Kuidas simuleerida klõpsamist JavaScriptiga?
JavaScriptis klikkimise simulatsiooni rakendamiseks saab rakendada järgmisi lähenemisviise.
1. lähenemisviis: simuleerige klõpsamist JavaScriptiga, kasutades onclicki sündmust
' onclick ” sündmus toimub nupu vajutamisel. Seda lähenemist saab rakendada funktsiooni käivitamiseks nupul klõpsamisel ja ' klikkide arv ” iga kord, kui nuppu klõpsate.
Ääremärkus: ' onclick ” sündmust saab lihtsalt rakendada, lisades selle konkreetse funktsiooniga.
Näide
Läbige järgmine koodilõik:
< Keskus >
< h3 stiilis = 'taustavärv: helesinine;' > Klõpsake nuppu Simuleeritud < ulatus klass = 'loendada' > ulatus > korda h3 >
< nupu id = 'btn1' onclick = 'countClick()' > Klõpsake Mina ! nuppu >
Keskus >
- Kaasake määratud pealkiri koos ' ' sildi suurendamiseks ' loendama ” klikkidest.
- Järgmises etapis looge nupp, millele on lisatud ' onclick ” sündmus, mis suunab ümber funktsioonile countClick(), millele pääseb juurde nupu klõpsamisel.
Nüüd käime läbi järgmised JavaScripti koodi read:
< stsenaarium >
lase klikid = 0 ;
funktsioon countClick ( ) {
klikid = klikid + 1 ;
dokument. querySelector ( '.count' ) . tekstSisu = klikid ;
}
stsenaarium >
Koodi ülaltoodud js-osas:
- Siin käivitage esmalt klõpsud nupuga ' 0 ”.
- Pärast seda deklareerige funktsioon nimega ' countClick() ”. Selle määratluses suurendage initsialiseeritud ' klikid ' koos ' 1 ”. Selle tulemuseks on loenduse suurendamine iga kord, kui nuppu klõpsate.
- Lõpuks avage ' ulatus ' elementi kasutades ' document.querySelector() ” meetod. Rakendage ka ' tekstSisu ” atribuut, et määrata spanelemendile eelnevalt käsitletud suurendatud klikkide arv.
Väljund on järgmine:
Suurendatava taimeri funktsionaalsust igal klõpsamisel saab jälgida ülaltoodud väljundis.
2. lähenemisviis: simuleerige klõpsamist JavaScriptiga meetodi addEventListener() abil
' addEventListener() ” meetod eraldab elemendile sündmuste käitleja. Seda meetodit saab rakendada, lisades elemendile konkreetse sündmuse ja teavitades kasutajat sündmuse käivitamisest.
Süntaks
element. addEventListener ( sündmus, funktsioon )Antud süntaksis:
- “ sündmus ” viitab sündmuse nimele.
- “ funktsiooni ” osutab sündmuse toimumisel käivitatavale funktsioonile.
Näide
Allpool toodud esitlus selgitab esitatud kontseptsiooni:
< Keskus >< keha >< a href = '#' id = 'link' > Klõpsake linki a >
keha > Keskus >
< stsenaarium >
olla kits = dokument. getElementById ( 'link' ) ;
saada. addEventListener ( 'klõps' , ( ) => hoiatus ( 'Klõpsake Simuleeritud!' ) )
stsenaarium >
Ülaltoodud koodis:
- Esiteks määrake ' ankur ” märgend, et lisada määratud link
- Koodi JavaScripti osas pääsete loodud lingile juurde, kasutades ' document.getElementById() ” meetod.
- Lõpuks rakendage ' addEventListener() ' meetod juurdepääsetavale ' link ”. ' klõpsa ” sündmus on sel juhul lisatud, mille tulemusel hoiatatakse loodud lingil klõpsamisel kasutajat.
Väljund
3. lähenemisviis: simuleerige klõpsu JavaScriptiga, kasutades meetodit click().
' kliki () ” meetod teostab elemendil hiireklõpsu simulatsiooni. Seda meetodit saab kasutada otse lisatud nuppudele klõpsamise simuleerimiseks, nagu nimigi täpsustab.
Süntaks
element. klõpsa ( )Antud süntaksis:
- “ element ” osutab elemendile, millel klõps tehakse.
Näide
Järgmine koodilõik selgitab esitatud kontseptsiooni:
< Keskus >< keha >< h3 > Kas sa leidsid see leht abiks ? h3 >
< nupp onclick = 'simulateClick()' id = 'simuleerida' > Jah nuppu >
< nupp onclick = 'simulateClick()' id = 'simuleerida' > Ei nuppu >
< h3 id = 'pea' stiilis = 'taustavärv: heleroheline;' > h3 >
keha > Keskus >
- Esiteks lisage märgitud pealkiri jaotisesse '
” silti. - Pärast seda looge määratud ID-ga kaks erinevat nuppu.
- Samuti lisage ' onclick ” sündmus, kus mõlemad kutsuvad esile funktsiooni simulateClick().
- Järgmises etapis lisage teine pealkiri määratud ' id ', et teavitada kasutajat niipea, kui klõpsa ” on simuleeritud.
Nüüd minge läbi alltoodud JavaScripti read:
< stsenaarium >funktsioon simulateClick ( ) {
dokument. getElementById ( 'simuleerida' ) . klõpsa ( )
lase saada = dokument. getElementById ( 'pea' )
saada. sisemine Tekst = 'Klõpsake Simuleeritud!'
}
stsenaarium >
- Määratlege funktsioon ' simulateClick() ”.
- Siin pääsete loodud nuppudele juurde, kasutades ' document.getElementById() ' meetodit ja rakendage ' kliki () ” meetod neile.
- Nüüd avage sarnaselt eraldatud pealkirjale ja rakendage ' sisemine Tekst ” atribuut, et kuvada simuleeritud klõpsamisel märgitud sõnum pealkirjana.
Väljund
Ülaltoodud väljundis on ilmne, et mõlemad loodud nupud simuleerivad klõpsamist.
See ajaveeb näitab, kuidas JavaScripti abil klikisimulatsiooni rakendada.
Järeldus
' onclick sündmus, ' addEventListener() meetodit või kliki () ” meetodit saab kasutada klõpsu simuleerimiseks JavaScriptiga. ' onclick ” sündmust saab rakendada klõpsu simuleerimiseks iga kord, kui nupul klõpsatakse loenduri kujul. ' addEventListener() ” meetodit saab kasutada sündmuse lisamiseks lingile ja kasutaja teavitamiseks klikkimise simulatsioonist. ' kliki () ” meetodit saab rakendada loodud nuppudele ja see täidab iga nupu jaoks vajalikke funktsioone. See kirjeldus selgitab, kuidas JavaScriptis klikisimulatsiooni rakendada.