Hogyan lehet kattintást szimulálni JavaScripttel?
A következő megközelítések valósíthatók meg a kattintásszimuláció JavaScriptben történő alkalmazásához:
1. megközelítés: Kattintás szimulálása JavaScript segítségével az onclick esemény használatával
egy ' kattintásra ” esemény a gomb megnyomásakor következik be. Ez a megközelítés alkalmazható egy funkció meghívására a gombra kattintva, és növeli a „ kattintásszám ” minden alkalommal, amikor a gombra kattintanak.
Oldaljegyzet: egy ' kattintásra ” esemény egyszerűen alkalmazható egy adott funkcióhoz való csatolással.
Példa
Végezze el a következő kódrészletet:
< központ >
< h3 stílusban = 'háttérszín: világoskék;' > Kattintson a Szimulált elemre < span osztály = 'számol' > span > alkalommal h3 >
< gomb id = 'btn1' kattintásra = 'countClick()' > Kattints ide ! gomb >
központ >
- Adja meg a megadott címsort a „ ' címke növeli a ' számol ” kattintások száma.
- A következő lépésben hozzon létre egy gombot a csatolt ' kattintásra ” esemény átirányítása a countClick() függvényre, amely a gombra kattintva érhető el.
Most menjünk végig a következő JavaScript kódsorokon:
< forgatókönyv >
hadd kattintsanak = 0 ;
függvény countClick ( ) {
kattintások = kattintások + 1 ;
dokumentum. querySelector ( '.számol' ) . textContent = kattintások ;
}
forgatókönyv >
A kód fenti js részében:
- Itt először inicializálja a kattintásokat a „ 0 ”.
- Ezt követően deklaráljon egy '' nevű függvényt countClick() ”. A definíciójában növelje az inicializált ' kattintások ' val vel ' 1 ”. Ez azt eredményezi, hogy minden alkalommal, amikor a gombra kattintanak, a szám növekszik.
- Végül nyissa meg a „ span ' elemet a ' document.querySelector() ” módszerrel. Alkalmazza továbbá a „ textContent ” tulajdonság, hogy a korábban tárgyalt megnövekedett kattintásszámot hozzárendelje a span elemhez.
A kimenet a következő lesz:
A növekményes időzítő működése minden kattintásra a fenti kimeneten látható.
2. megközelítés: Kattintás szimulálása JavaScript segítségével az addEventListener() módszerrel
Az ' addEventListener() ” metódus eseménykezelőt rendel egy elemhez. Ez a módszer úgy valósítható meg, hogy egy adott eseményt csatolunk egy elemhez, és figyelmeztetjük a felhasználót az esemény indításakor.
Szintaxis
elem. addEventListener ( esemény, funkció )Az adott szintaxisban:
- ' esemény ” az esemény nevére utal.
- ' funkció ” az esemény bekövetkezésekor végrehajtandó függvényre mutat.
Példa
Az alábbi bemutató elmagyarázza a megfogalmazott koncepciót:
< központ >< test >< a href = '#' id = 'link' > Kattintson a linkre a >
test > központ >
< forgatókönyv >
legyen kecske = dokumentum. getElementById ( 'link' ) ;
kap. addEventListener ( 'kattint' , ( ) => éber ( 'Kattintson a Szimulált gombra!' ) )
forgatókönyv >
A fenti kódban:
- Először adjon meg egy „ horgony ” címkét, hogy tartalmazza a megadott hivatkozást
- A kód JavaScript részében nyissa meg a létrehozott hivatkozást a „ document.getElementById() ” módszerrel.
- Végül alkalmazza a „ addEventListener() ' módszer az elért ' link ”. Az ' kattintson ” esemény ebben az esetben csatolva van, ami a létrehozott linkre kattintva figyelmezteti a felhasználót.
Kimenet
3. megközelítés: Kattintás szimulálása JavaScript segítségével a click() módszer használatával
Az ' kattints() ” metódus egérkattintás szimulációt hajt végre egy elemen. Ezzel a módszerrel szimulálható egy kattintás közvetlenül a csatolt gombokra, ahogy a név is jelzi.
Szintaxis
elem. kattintson ( )Az adott szintaxisban:
- ' elem ” arra az elemre mutat, amelyen a kattintás végrehajtódik.
Példa
A következő kódrészlet magyarázza a megadott fogalmat:
< központ >< test >< h3 > Megtaláltad ez oldal hasznos ? h3 >
< gomb onclick = 'szimulateClick()' id = 'szimulál' > Igen gomb >
< gomb onclick = 'szimulateClick()' id = 'szimulál' > Dehogy gomb >
< h3 id = 'fej' stílus = 'háttérszín: világoszöld;' > h3 >
test > központ >
- Először is adja meg a megadott címsort a „
” címke. - Ezután hozzon létre két különböző gombot a megadott azonosítókkal.
- Csatoljon egy „ kattintásra ” esemény, mindkettő meghívja a simulateClick() függvényt.
- A következő lépésben adjon meg egy másik címsort a megadott ' id ', hogy azonnal értesítse a felhasználót, amint a ' kattintson ” szimulálódik.
Most menjen végig az alábbi JavaScript-sorokon:
< forgatókönyv >függvény simulateClick ( ) {
dokumentum. getElementById ( 'szimulál' ) . kattintson ( )
engedd el = dokumentum. getElementById ( 'fej' )
kap. innerText = 'Kattintson Szimulált!'
}
forgatókönyv >
- Határozzon meg egy függvényt ' simulateClick() ”.
- Itt érheti el a létrehozott gombokat a „ document.getElementById() ” módszert, és alkalmazza a „ kattints() ” módszert nekik.
- Most ehhez hasonlóan nyissa meg a hozzárendelt címsort, és alkalmazza a „ innerText ” tulajdonság, hogy a szimulált kattintáskor fejlécként jelenítse meg a megadott üzenetet.
Kimenet
A fenti kimeneten látható, hogy mindkét létrehozott gomb a kattintást szimulálja.
Ez a blog azt mutatja be, hogyan kell JavaScript használatával kattintásszimulációt alkalmazni.
Következtetés
egy ' kattintásra ” esemény, a „ addEventListener() ” módszer, vagy a „ kattints() ” metódus használható egy kattintás szimulálására JavaScripttel. egy ' kattintásra ” esemény alkalmazható a kattintás szimulálására minden alkalommal, amikor a gombra kattintanak, számláló formájában. Az ' addEventListener() ” módszerrel eseményt csatolhatunk a linkhez, és értesíthetjük a felhasználót a kattintásszimulációról. Az ' kattints() ” metódus alkalmazható a létrehozott gombokra, és végrehajtja a szükséges funkciókat az egyes gombokhoz. Ez az írás elmagyarázza, hogyan kell kattintásszimulációt alkalmazni JavaScriptben.