Ako simulovať kliknutie pomocou JavaScriptu?
Na použitie simulácie kliknutia v JavaScripte možno implementovať nasledujúce prístupy:
Prístup 1: Simulácia kliknutia pomocou JavaScriptu pomocou udalosti onclick
„ po kliknutí ” udalosť nastane po stlačení tlačidla. Tento prístup možno použiť na vyvolanie funkcie po kliknutí na tlačidlo a zvýšenie „ počet kliknutí “ pri každom kliknutí na tlačidlo.
Poznámka: „ po kliknutí ” udalosť možno jednoducho použiť tak, že ju pripojíte k určitej funkcii.
Príklad
Prejdite si nasledujúci útržok kódu:
< centrum >
< štýl h3 = 'farba pozadia: svetlomodrá;' > Kliknite na položku Simulované < rozpätie trieda = 'počítať' > rozpätie > krát h3 >
< ID tlačidla = 'btn1' po kliknutí = 'countClick()' > Klikni na mňa ! tlačidlo >
centrum >
- Zahrňte špecifikovaný nadpis spolu s „ ” tag na zvýšenie “ počítať ” kliknutí.
- V ďalšom kroku vytvorte tlačidlo s pripojeným „ po kliknutí ” udalosť presmerovanie na funkciu countClick(), ktorá bude prístupná po kliknutí na tlačidlo.
Teraz si prejdime nasledujúce riadky kódu JavaScript:
< skript >
nech klikne = 0 ;
funkcia počítanieKlik ( ) {
kliknutia = kliknutia + 1 ;
dokument. querySelector ( '.count' ) . textObsah = kliknutia ;
}
skript >
Vo vyššie uvedenej js časti kódu:
- Tu najprv inicializujte kliknutia pomocou „ 0 “.
- Potom deklarujte funkciu s názvom „ countClick() “. Vo svojej definícii zvýšte inicializovaný „ kliknutia “ s “ 1 “. Výsledkom bude zvýšenie počtu pri každom kliknutí na tlačidlo.
- Nakoniec prejdite na „ rozpätie ” prvok pomocou “ document.querySelector() “. Tiež použite „ textObsah ” na pridelenie vyššie uvedeného zvýšeného počtu kliknutí prvku span.
Výstup bude nasledovný:
Funkčnosť inkrementovaného časovača po každom kliknutí je možné pozorovať vo vyššie uvedenom výstupe.
Prístup 2: Simulácia kliknutia pomocou JavaScriptu pomocou metódy addEventListener().
' addEventListener() ” metóda prideľuje obslužnú rutinu udalosti prvku. Táto metóda môže byť implementovaná pripojením špecifickej udalosti k prvku a upozornením používateľa na spustenie udalosti.
Syntax
prvok. addEventListener ( udalosť, funkcia )V danej syntaxi:
- “ udalosť “ odkazuje na názov udalosti.
- “ funkciu “ ukazuje na funkciu, ktorá sa má vykonať, keď nastane udalosť.
Príklad
Nižšie uvedená ukážka vysvetľuje uvedený koncept:
< centrum < telo >< a href = '#' id = 'odkaz' > Kliknite na odkaz a >
telo > centrum >
< skript >
byť koza = dokument. getElementById ( 'link' ) ;
dostať. addEventListener ( 'klikni' , ( ) => upozorniť ( 'Kliknite na Simulované!' ) )
skript >
Vo vyššie uvedenom kóde:
- Najprv zadajte „ Kotva ” na zahrnutie zadaného odkazu
- V časti kódu JavaScript prejdite na vytvorený odkaz pomocou „ document.getElementById() “.
- Nakoniec použite „ addEventListener() „metóda k prístupnému“ odkaz “. ' kliknite “ je v tomto prípade pripojená udalosť, ktorá bude mať za následok upozornenie používateľa po kliknutí na vytvorený odkaz.
Výkon
Prístup 3: Simulácia kliknutia pomocou JavaScriptu pomocou metódy click().
' klikni() ” vykoná simuláciu kliknutia myšou na prvok. Túto metódu je možné použiť na simuláciu kliknutia priamo na pripojené tlačidlá, ako uvádza názov.
Syntax
prvok. kliknite ( )V danej syntaxi:
- “ prvok “ ukazuje na prvok, na ktorý sa kliknutie vykoná.
Príklad
Nasledujúci útržok kódu vysvetľuje uvedený koncept:
< centrum < telo >< h3 > Našiel si toto stránka užitočná ? h3 >
< tlačidlo onclick = 'simulateClick()' id = 'simulovať' > Áno tlačidlo >
< tlačidlo onclick = 'simulateClick()' id = 'simulovať' > nie tlačidlo >
< h3 id = 'hlava' štýl = 'farba pozadia: svetlozelená;' > h3 >
telo > centrum >
- Najprv zahrňte uvedený nadpis do „
” tag. - Potom vytvorte dve rôzne tlačidlá so zadanými ID.
- Pripojte tiež „ po kliknutí ” udalosť s oboma vyvolávajúcimi funkciu simulateClick().
- V ďalšom kroku zahrňte ďalší nadpis so zadaným „ id “, aby ste upovedomili používateľa, akonáhle „ kliknite “ je simulovaný.
Teraz si prejdite nižšie uvedené riadky JavaScriptu:
< skript >funkcia simulateClick ( ) {
dokument. getElementById ( 'simulovať' ) . kliknite ( )
nechať sa dostať = dokument. getElementById ( 'hlava' )
dostať. vnútornýText = 'Kliknite na Simulované!'
}
skript >
- Definujte funkciu ' simulateClick() “.
- Tu získate prístup k vytvoreným tlačidlám pomocou „ document.getElementById() “ a použite metódu “ klikni() “ metóda pre nich.
- Teraz, podobne, prejdite k pridelenému nadpisu a použite „ vnútornýText ” vlastnosť na zobrazenie uvedenej správy ako nadpisu po simulovanom kliknutí.
Výkon
Vo vyššie uvedenom výstupe je evidentné, že obe vytvorené tlačidlá simulujú kliknutie.
Tento blog ukazuje, ako použiť simuláciu kliknutia pomocou JavaScriptu.
Záver
„ po kliknutí 'udalosť', ' addEventListener() “ alebo “ klikni() ” metódu možno použiť na simuláciu kliknutia pomocou JavaScriptu. „ po kliknutí Udalosť ” môže byť použitá na simuláciu kliknutia pri každom kliknutí na tlačidlo vo forme počítadla. ' addEventListener() ” možno použiť na pripojenie udalosti k odkazu a upovedomenie používateľa o simulácii kliknutia. ' klikni() ” metóda môže byť použitá na vytvorené tlačidlá a vykonáva požadovanú funkčnosť pre každé z tlačidiel. Tento článok vysvetľuje, ako použiť simuláciu kliknutia v JavaScripte.