Kako simulirati klik s JavaScriptom?
Sljedeći pristupi mogu se implementirati za primjenu simulacije klika u JavaScriptu:
Pristup 1: Simulirajte klik pomoću JavaScripta pomoću događaja onclick
' na klik ” događa se kada se pritisne tipka. Ovaj se pristup može primijeniti za pozivanje funkcije nakon klika na gumb i povećanje ' broj klikova ” svaki put kada se pritisne gumb.
Dodatna napomena: ' na klik ” događaj se jednostavno može primijeniti pripajanjem s određenom funkcijom.
Primjer
Prođite kroz sljedeći isječak koda:
< centar >
< h3 stilu = 'boja-pozadine: svijetloplava;' > Pritisnite Simulirano < raspon razreda = 'računati' > raspon > puta h3 >
< id gumba = 'btn1' na klik = 'countClick()' > Kliknite Ja ! dugme >
centar >
- Uključite navedeni naslov zajedno s ' ” za povećanje “ računati ” klikova.
- U sljedećem koraku izradite gumb s priloženim ' na klik ” preusmjeravanje na funkciju countClick() kojoj će se pristupiti klikom na gumb.
Sada prođimo kroz sljedeće retke JavaScript koda:
< skripta >
neka klikne = 0 ;
funkcija countClick ( ) {
klikovi = klikovi + 1 ;
dokument. querySelector ( '.računati' ) . textContent = klikovi ;
}
skripta >
U gornjem js dijelu koda:
- Ovdje prvo inicijalizirajte klikove s ' 0 ”.
- Nakon toga, deklarirajte funkciju pod nazivom ' countClick() ”. U svojoj definiciji, povećajte inicijalizirani ' klikovi ” sa “ 1 ”. To će rezultirati povećanjem broja svaki put kada se pritisne gumb.
- Na kraju, pristupite ' raspon ' element pomoću ' document.querySelector() ” metoda. Također, primijenite ' textContent ” svojstvo za dodjelu povećanog broja klikova o kojem je prije bilo riječi elementu raspona.
Izlaz će biti sljedeći:
Funkcionalnost inkrementiranog mjerača vremena nakon svakog klika može se vidjeti u gornjem izlazu.
Pristup 2: Simulirajte klik s JavaScriptom putem metode addEventListener().
' addEventListener() ” metoda dodjeljuje elementu rukovatelj događajem. Ova se metoda može implementirati pridavanjem određenog događaja elementu i upozoravanjem korisnika na okidač događaja.
Sintaksa
element. addEventListener ( događaj, funkcija )U navedenoj sintaksi:
- “ događaj ” odnosi se na naziv događaja.
- “ funkcija ” pokazuje na funkciju koju treba izvršiti kada se događaj dogodi.
Primjer
Demonstracija u nastavku objašnjava navedeni koncept:
< centar >< tijelo >< a href = '#' iskaznica = 'veza' > Kliknite vezu a >
tijelo > centar >
< skripta >
biti koza = dokument. getElementById ( 'veza' ) ;
dobiti. addEventListener ( 'klik' , ( ) => uzbuna ( 'Klikni Simulirano!' ) )
skripta >
U gornjem kodu:
- Prvo navedite ' sidro ” za uključivanje navedene veze
- U JavaScript dijelu koda, pristupite stvorenoj vezi koristeći ' document.getElementById() ” metoda.
- Na kraju primijenite ' addEventListener() ” metoda do pristupanog “ veza ”. ' klik ” događaj je priložen u ovom slučaju koji će rezultirati upozorenjem korisnika nakon klika na stvorenu poveznicu.
Izlaz
Pristup 3: Simulirajte klik s JavaScriptom pomoću metode click().
' klik() ” izvodi simulaciju klika mišem na element. Ova se metoda može koristiti za simulaciju klika izravno na priložene gumbe kao što naziv navodi.
Sintaksa
element. klik ( )U navedenoj sintaksi:
- “ element ” pokazuje na element na kojem će se izvršiti klik.
Primjer
Sljedeći isječak koda objašnjava navedeni koncept:
< centar >< tijelo >< h3 > Jesi li pronašao ovaj stranica korisna ? h3 >
< gumb na klik = 'simulateClick()' iskaznica = 'simulirati' > Da dugme >
< gumb na klik = 'simulateClick()' iskaznica = 'simulirati' > Ne dugme >
< h3 id = 'glava' stil = 'boja-pozadine: svijetlozelena;' > h3 >
tijelo > centar >
- Prvo uključite navedeni naslov unutar '
” oznaka. - Nakon toga izradite dva različita gumba s navedenim ID-ovima.
- Također, priložite ' na klik ” pri čemu oba pozivaju funkciju simulateClick().
- U sljedećem koraku uključite drugi naslov s navedenim ' iskaznica ' kako biste obavijestili korisnika čim ' klik ” je simuliran.
Sada prođite kroz dolje date JavaScript retke:
< skripta >funkcija simulateClick ( ) {
dokument. getElementById ( 'simulirati' ) . klik ( )
neka dobije = dokument. getElementById ( 'glava' )
dobiti. unutarnjiTekst = 'Klikni Simulirano!'
}
skripta >
- Definirajte funkciju ' simulirajKlik() ”.
- Ovdje pristupite kreiranim gumbima pomoću ' document.getElementById() ' i primijenite ' klik() ” metoda im.
- Sada, na sličan način, pristupite dodijeljenom naslovu i primijenite ' unutarnjiTekst ” za prikaz navedene poruke kao naslova nakon simuliranog klika.
Izlaz
U gornjem izlazu vidljivo je da oba kreirana gumba simuliraju klik.
Ovaj blog pokazuje kako primijeniti simulaciju klika pomoću JavaScripta.
Zaključak
' na klik ' događaj, ' addEventListener() ' metoda ili ' klik() ” može se upotrijebiti za simulaciju klika s JavaScriptom. ' na klik ” može se primijeniti događaj za simulaciju klika svaki put kada se klikne gumb u obliku brojača. ' addEventListener() ” može se koristiti za prilaganje događaja poveznici i obavještavanje korisnika o simulaciji klika. ' klik() ” metoda se može primijeniti na kreirane gumbe i izvodi potrebnu funkciju za svaki od gumba. Ovaj tekst objašnjava kako primijeniti simulaciju klika u JavaScriptu.