Jak simulovat kliknutí pomocí JavaScriptu?
K aplikaci simulace kliknutí v JavaScriptu lze implementovat následující přístupy:
Přístup 1: Simulace kliknutí pomocí JavaScriptu pomocí události onclick
' při kliknutí ” dojde po stisknutí tlačítka. Tento přístup lze použít k vyvolání funkce po kliknutí na tlačítko a zvýšení „ počet kliknutí “ při každém kliknutí na tlačítko.
Poznámka na stranu: ' při kliknutí ” událost lze jednoduše použít připojením k určité funkci.
Příklad
Projděte si následující fragment kódu:
< centrum >
< styl h3 = 'barva pozadí: světle modrá;' > Klepněte na Simulované < rozpětí třída = 'počet' > rozpětí > časy h3 >
< ID tlačítka = 'btn1' při kliknutí = 'countClick()' > Klikni na mě ! knoflík >
centrum >
- Zahrňte zadaný nadpis spolu s „ ” tag pro zvýšení “ počet ” kliknutí.
- V dalším kroku vytvořte tlačítko s připojeným „ při kliknutí ” událost přesměrování na funkci countClick(), která bude přístupná po kliknutí na tlačítko.
Nyní si projdeme následující řádky kódu JavaScript:
< skript >
ať klikne = 0 ;
funkce countKlikněte ( ) {
kliknutí = kliknutí + 1 ;
dokument. querySelector ( '.počet' ) . textObsah = kliknutí ;
}
skript >
Ve výše uvedené js části kódu:
- Zde nejprve inicializujte kliknutí pomocí „ 0 “.
- Poté deklarujte funkci s názvem „ countClick() “. V jeho definici zvyšte inicializovaný „ kliknutí “ s “ 1 “. To povede ke zvýšení počtu při každém kliknutí na tlačítko.
- Nakonec přejděte na „ rozpětí ” prvek pomocí “ document.querySelector() “ metoda. Aplikujte také „ textObsah ” pro přiřazení výše popsaného zvýšeného počtu kliknutí prvku span.
Výstup bude následující:
Funkčnost inkrementovaného časovače při každém kliknutí lze sledovat ve výše uvedeném výstupu.
Přístup 2: Simulace kliknutí pomocí JavaScriptu pomocí metody addEventListener().
' addEventListener() ” metoda alokuje obslužnou rutinu události prvku. Tuto metodu lze implementovat připojením konkrétní události k prvku a upozorněním uživatele na spuštění události.
Syntax
živel. addEventListener ( událost, funkce )V dané syntaxi:
- “ událost “ odkazuje na název události.
- “ funkce ” ukazuje na funkci, která se má provést, když dojde k události.
Příklad
Níže uvedená ukázka vysvětluje uvedený koncept:
< centrum < tělo >< a href = '#' id = 'odkaz' > Klikněte na odkaz A >
tělo > centrum >
< skript >
být koza = dokument. getElementById ( 'odkaz' ) ;
dostat. addEventListener ( 'kliknout' , ( ) => upozornění ( 'Klikněte na Simulované!' ) )
skript >
Ve výše uvedeném kódu:
- Nejprve zadejte „ Kotva ” pro zahrnutí zadaného odkazu
- V JavaScriptové části kódu přejděte na vytvořený odkaz pomocí „ document.getElementById() “ metoda.
- Nakonec použijte „ addEventListener() ” metoda k přistupovanému “ odkaz “. ' klikněte “ je v tomto případě připojena událost, která bude mít za následek upozornění uživatele po kliknutí na vytvořený odkaz.
Výstup
Přístup 3: Simulace kliknutí pomocí JavaScriptu pomocí metody click().
' klikni() ” provádí simulaci kliknutí myší na prvek. Tuto metodu lze použít k simulaci kliknutí přímo na připojená tlačítka, jak je uvedeno v názvu.
Syntax
živel. klikněte ( )V dané syntaxi:
- “ živel ” ukazuje na prvek, na který bude kliknutí provedeno.
Příklad
Následující fragment kódu vysvětluje uvedený koncept:
< centrum < tělo >< h3 > Našel jsi tento stránka užitečná ? h3 >
< tlačítko onclick = 'simulateClick()' id = 'simulovat' > Ano knoflík >
< tlačítko onclick = 'simulateClick()' id = 'simulovat' > ani náhodou knoflík >
< h3 id = 'hlava' styl = 'barva pozadí: světle zelená;' > h3 >
tělo > centrum >
- Nejprve zahrňte uvedený nadpis do „
” tag. - Poté vytvořte dvě různá tlačítka se zadanými ID.
- Připojte také „ při kliknutí ” událost s oběma vyvolávajícími funkci simulateClick().
- V dalším kroku zahrňte další nadpis se zadaným „ id “, aby byl uživatel informován, jakmile „ klikněte “ je simulován.
Nyní projděte níže uvedené řádky JavaScriptu:
< skript >funkce simulateClick ( ) {
dokument. getElementById ( 'simulovat' ) . klikněte ( )
nechat se dostat = dokument. getElementById ( 'hlava' )
dostat. vnitřníText = 'Klikněte na Simulované!'
}
skript >
- Definujte funkci ' simulateClick() “.
- Zde získáte přístup k vytvořeným tlačítkům pomocí „ document.getElementById() “ a použijte metodu “ klikni() “ metodu pro ně.
- Nyní, podobně, přejděte k přidělenému záhlaví a použijte „ vnitřníText ” pro zobrazení uvedené zprávy jako nadpisu po simulovaném kliknutí.
Výstup
Na výše uvedeném výstupu je patrné, že obě vytvořená tlačítka simulují kliknutí.
Tento blog ukazuje, jak použít simulaci kliknutí pomocí JavaScriptu.
Závěr
' při kliknutí “ událost, “ addEventListener() metoda “, nebo “ klikni() ” metodu lze použít k simulaci kliknutí pomocí JavaScriptu. ' při kliknutí ” událost lze použít k simulaci kliknutí při každém kliknutí na tlačítko ve formě počítadla. ' addEventListener() ” metodu lze použít k připojení události k odkazu a upozornění uživatele na simulaci kliknutí. ' klikni() ” metodu lze aplikovat na vytvořená tlačítka a provádí požadovanou funkcionalitu pro každé z tlačítek. Tento článek vysvětluje, jak použít simulaci kliknutí v JavaScriptu.