Hvordan simulere et klikk med JavaScript?
Følgende tilnærminger kan implementeres for å bruke en klikksimulering i JavaScript:
Tilnærming 1: Simuler et klikk med JavaScript ved å bruke onclick-hendelsen
en ' ved trykk ” hendelsen oppstår når knappen trykkes. Denne tilnærmingen kan brukes for å påkalle en funksjon ved å klikke på knappen og øke ' antall klikk ” hver gang knappen klikkes.
Sidemerknad: en ' ved trykk ”-hendelse kan ganske enkelt brukes ved å knytte den til en bestemt funksjon.
Eksempel
Gå gjennom følgende kodebit:
< senter >
< h3 stil = 'bakgrunnsfarge: lyseblå;' > Klikk Simulert < span klasse = 'telle' > span > ganger h3 >
< knappen ID = 'btn1' ved trykk = 'countClick()' > Klikk på meg ! knapp >
senter >
- Ta med den angitte overskriften sammen med en ' '-taggen for å øke ' telle ' av klikk.
- I neste trinn oppretter du en knapp med en vedlagt ' ved trykk ”-hendelse som omdirigerer til funksjonen countClick() som vil bli åpnet ved å klikke på knappen.
La oss nå gå gjennom følgende JavaScript-kodelinjer:
< manus >
la klikk = 0 ;
funksjon telleKlikk ( ) {
klikker = klikker + 1 ;
dokument. querySelector ( '.telle' ) . textContent = klikker ;
}
manus >
I den ovennevnte js-delen av koden:
- Her initialiser først klikkene med ' 0 '.
- Deretter erklærer du en funksjon som heter ' countClick() '. I definisjonen øker du den initialiserte ' klikker ' med ' 1 '. Dette vil resultere i å øke antallet hver gang du klikker på knappen.
- Til slutt, få tilgang til ' span ' element ved hjelp av ' document.querySelector() 'metoden. Bruk også ' textContent ”-egenskapen for å tildele det økte antallet klikk som er diskutert før til span-elementet.
Utgangen vil være som følger:
Funksjonaliteten til den inkrementerte timeren ved hvert klikk kan observeres i utgangen ovenfor.
Tilnærming 2: Simuler et klikk med JavaScript via addEventListener()-metoden
« addEventListener() ”-metoden tildeler en hendelsesbehandler til et element. Denne metoden kan implementeres ved å knytte en spesifikk hendelse til et element og varsle brukeren når hendelsen utløses.
Syntaks
element. addEventListener ( hendelse, funksjon )I den gitte syntaksen:
- ' begivenhet ' refererer til hendelsesnavnet.
- ' funksjon ” peker på funksjonen som skal utføres når hendelsen inntreffer.
Eksempel
Den nedenfor gitte demonstrasjonen forklarer det angitte konseptet:
< senter >< kropp >< a href = '#' id = 'lenke' > Klikk på lenken en >
kropp > senter >
< manus >
være geit = dokument. getElementById ( 'link' ) ;
få. addEventListener ( 'klikk' , ( ) => varsling ( 'Klikk Simulert!' ) )
manus >
I koden ovenfor:
- Først spesifiser en ' anker '-taggen for å inkludere den angitte koblingen
- I JavaScript-delen av koden får du tilgang til den opprettede koblingen ved å bruke ' document.getElementById() 'metoden.
- Til slutt bruker du ' addEventListener() ' metoden til den åpnede ' link '. « klikk ”-hendelse er vedlagt i dette tilfellet som vil resultere i å varsle brukeren ved å klikke på den opprettede lenken.
Produksjon
Tilnærming 3: Simuler et klikk med JavaScript ved å bruke click()-metoden
« klikk() ”-metoden utfører en museklikksimulering på et element. Denne metoden kan brukes til å simulere et klikk direkte til de vedlagte knappene som navnet angir.
Syntaks
element. klikk ( )I den gitte syntaksen:
- ' element ” peker på elementet som klikket skal utføres på.
Eksempel
Følgende kodebit forklarer det oppgitte konseptet:
< senter >< kropp >< h3 > Fant du dette siden nyttig ? h3 >
< knappen ved å klikke = 'simulateClick()' id = 'simulere' > Ja knapp >
< knappen ved å klikke = 'simulateClick()' id = 'simulere' > Nei knapp >
< h3 id = 'hode' stil = 'bakgrunnsfarge: lysegrønn;' > h3 >
kropp > senter >
- Ta først med den oppgitte overskriften i '
' stikkord. - Deretter oppretter du to forskjellige knapper med de angitte ID-ene.
- Legg også ved en ' ved trykk ” hendelse der begge påkaller funksjonen simulateClick().
- I neste trinn inkluderer du en annen overskrift med spesifisert ' id ' for å varsle brukeren så snart ' klikk ' er simulert.
Gå nå gjennom JavaScript-linjene nedenfor:
< manus >funksjon simulateClick ( ) {
dokument. getElementById ( 'simulere' ) . klikk ( )
la få = dokument. getElementById ( 'hode' )
få. indreTekst = 'Klikk Simulert!'
}
manus >
- Definer en funksjon ' simulateClick() '.
- Her får du tilgang til de opprettede knappene ved å bruke ' document.getElementById() '-metoden og bruk ' klikk() ”-metoden til dem.
- Nå, på samme måte, få tilgang til den tildelte overskriften og bruk ' indreTekst ”-egenskap for å vise den angitte meldingen som en overskrift ved det simulerte klikket.
Produksjon
I utgangen ovenfor er det tydelig at begge opprettede knappene simulerer klikket.
Denne bloggen viser hvordan du bruker en klikksimulering ved hjelp av JavaScript.
Konklusjon
en ' ved trykk hendelsen, addEventListener() '-metoden, eller ' klikk() ”-metoden kan brukes til å simulere et klikk med JavaScript. en ' ved trykk ”-hendelse kan brukes for å simulere et klikk hver gang knappen klikkes i form av en teller. « addEventListener() ”-metoden kan brukes til å legge ved en hendelse til lenken og varsle brukeren ved klikksimuleringen. « klikk() ”-metoden kan brukes på de opprettede knappene og utfører den nødvendige funksjonaliteten for hver av knappene. Denne artikkelen forklarer hvordan du bruker en klikksimulering i JavaScript.