Hvordan simulerer man et klik med JavaScript?
Følgende tilgange kan implementeres for at anvende en kliksimulering i JavaScript:
Fremgangsmåde 1: Simuler et klik med JavaScript ved hjælp af onclick-hændelsen
en ' onclick ” hændelse opstår, når der trykkes på knappen. Denne tilgang kan anvendes til at påkalde en funktion ved at klikke på knappen og øge ' klikantal ” hver gang der trykkes på knappen.
Sidebemærkning: en ' onclick ” hændelse kan simpelthen anvendes ved at knytte den til en bestemt funktion.
Eksempel
Gå gennem følgende kodestykke:
< centrum >
< h3 stil = 'baggrundsfarve: lyseblå;' > Klik på Simuleret < span klasse = 'tælle' > span > gange h3 >
< knap-id = 'btn1' onclick = 'countClick()' > Klik på Mig ! knap >
centrum >
- Inkluder den angivne overskrift sammen med en ' ' tag for at øge ' tælle ” af klik.
- I det næste trin skal du oprette en knap med en vedhæftet ' onclick ” hændelse, der omdirigerer til funktionen countClick(), som vil blive tilgået ved et klik på knappen.
Lad os nu gennemgå følgende JavaScript-kodelinjer:
< manuskript >
lad klik = 0 ;
funktion countKlik ( ) {
klik = klik + 1 ;
dokument. querySelector ( '.tælle' ) . tekstindhold = klik ;
}
manuskript >
I ovenstående js del af koden:
- Her skal du først initialisere klikkene med ' 0 ”.
- Derefter erklærer du en funktion ved navn ' countClick() ”. I sin definition øges den initialiserede ' klik ' med ' 1 ”. Dette vil resultere i, at antallet øges, hver gang der klikkes på knappen.
- Til sidst skal du få adgang til ' span ' element ved hjælp af ' document.querySelector() ” metode. Anvend også ' tekstindhold ” egenskab for at allokere det øgede klikantal, der er diskuteret før, til span-elementet.
Outputtet bliver som følger:
Funktionaliteten af den inkrementerede timer ved hvert klik kan ses i ovenstående output.
Fremgangsmåde 2: Simuler et klik med JavaScript via addEventListener()-metoden
Det ' addEventListener() ”-metoden allokerer en hændelseshandler til et element. Denne metode kan implementeres ved at knytte en specifik hændelse til et element og advare brugeren ved udløsningen af hændelsen.
Syntaks
element. addEventListener ( begivenhed, funktion )I den givne syntaks:
- “ begivenhed ” refererer til begivenhedens navn.
- “ fungere ” peger på den funktion, der skal udføres, når hændelsen indtræffer.
Eksempel
Nedenstående demonstration forklarer det angivne koncept:
< centrum >< legeme >< a href = '#' id = 'link' > Klik på linket -en >
legeme > centrum >
< manuskript >
være ged = dokument. getElementById ( 'link' ) ;
få. addEventListener ( 'klik' , ( ) => alert ( 'Klik Simuleret!' ) )
manuskript >
I ovenstående kode:
- Angiv først en ' anker ” tag for at inkludere det angivne link
- I JavaScript-delen af koden skal du få adgang til det oprettede link ved hjælp af ' document.getElementById() ” metode.
- Anvend endelig ' addEventListener() ' metode til den tilgåede ' link ”. Det ' klik ” begivenhed er vedhæftet i dette tilfælde, hvilket vil resultere i at advare brugeren ved at klikke på det oprettede link.
Produktion
Fremgangsmåde 3: Simuler et klik med JavaScript ved hjælp af click()-metoden
Det ' klik() ”-metoden udfører en museklik-simulering på et element. Denne metode kan bruges til at simulere et klik direkte til de vedhæftede knapper, som navnet angiver.
Syntaks
element. klik ( )I den givne syntaks:
- “ element ” peger på det element, hvorpå klikket vil blive udført.
Eksempel
Følgende kodestykke forklarer det angivne koncept:
< centrum >< legeme >< h3 > Fandt du dette side nyttig ? h3 >
< knappen ved at klikke = 'simulateClick()' id = 'simulere' > Ja knap >
< knappen ved at klikke = 'simulateClick()' id = 'simulere' > Nix knap >
< h3 id = 'hoved' stil = 'baggrundsfarve: lysegrøn;' > h3 >
legeme > centrum >
- Medtag først den angivne overskrift i '
” tag. - Derefter skal du oprette to forskellige knapper med de angivne id'er.
- Vedhæft også en ' onclick ” hændelse, hvor begge påkalder funktionen simulateClick().
- I det næste trin skal du inkludere en anden overskrift med den angivne ' id ' for at give brugeren besked, så snart ' klik ” er simuleret.
Gå nu gennem nedenstående JavaScript-linjer:
< manuskript >funktion simulereKlik ( ) {
dokument. getElementById ( 'simulere' ) . klik ( )
lad få = dokument. getElementById ( 'hoved' )
få. indreTekst = 'Klik Simuleret!'
}
manuskript >
- Definer en funktion ' simulateClick() ”.
- Her får du adgang til de oprettede knapper ved hjælp af ' document.getElementById() '-metoden og anvende ' klik() ” metode til dem.
- Få nu på samme måde adgang til den tildelte overskrift og anvend ' indreTekst ” egenskab for at vise den angivne meddelelse som en overskrift ved det simulerede klik.
Produktion
I ovenstående output er det tydeligt, at begge oprettede knapper simulerer klikket.
Denne blog viser, hvordan man anvender en kliksimulering ved hjælp af JavaScript.
Konklusion
en ' onclick ' begivenhed, ' addEventListener() '-metoden eller ' klik() ”-metoden kan bruges til at simulere et klik med JavaScript. en ' onclick ” hændelse kan anvendes til at simulere et klik hver gang der klikkes på knappen i form af en tæller. Det ' addEventListener() ”-metoden kan bruges til at vedhæfte en begivenhed til linket og give brugeren besked ved kliksimuleringen. Det ' klik() ”-metoden kan anvendes på de oprettede knapper og udfører den nødvendige funktionalitet for hver af knapperne. Denne artikel forklarer, hvordan man anvender en kliksimulering i JavaScript.