Jak symulować kliknięcie za pomocą JavaScript?
Aby zastosować symulację kliknięcia w JavaScript, można zastosować następujące podejścia:
Podejście 1: Symuluj kliknięcie za pomocą JavaScript za pomocą zdarzenia onclick
Jakiś ' na kliknięcie ” zdarzenie następuje po naciśnięciu przycisku. To podejście można zastosować do wywołania funkcji po kliknięciu przycisku i zwiększenia „ liczba kliknięć ” po każdym kliknięciu przycisku.
Dygresja: Jakiś ' na kliknięcie ” zdarzenie można po prostu zastosować, dołączając do niego określoną funkcję.
Przykład
Przejrzyj następujący fragment kodu:
< środek >
< styl h3 = 'kolor tła: jasnoniebieski;' > Kliknij Symulowane < Zakres klasa = 'liczyć' > Zakres > czasy h3 >
< identyfikator przycisku = „btn1” na kliknięcie = 'countClick()' > Kliknij ! przycisk >
środek >
- Uwzględnij określony nagłówek wraz z „
„, aby zwiększyć „ liczyć ” kliknięć. - W kolejnym kroku utwórz przycisk z dołączonym „ na kliknięcie ” zdarzenie przekierowujące do funkcji countClick(), która będzie dostępna po kliknięciu przycisku.
Przejdźmy teraz przez następujące linie kodu JavaScript:
< scenariusz >
niech kliknie = 0 ;
funkcja licznikKliknij ( ) {
kliknięcia = kliknięcia + 1 ;
dokument. selektor zapytań ( '.liczyć' ) . tekstZawartość = kliknięcia ;
}
scenariusz >
W powyższej części kodu js:
- Tutaj najpierw zainicjuj kliknięcia za pomocą „ 0 ”.
- Następnie zadeklaruj funkcję o nazwie „ liczbaKliknij() ”. W swojej definicji zwiększ zainicjowany „ kliknięcia ' z ' 1 ”. Spowoduje to zwiększenie liczby po każdym kliknięciu przycisku.
- Na koniec przejdź do „ Zakres ” za pomocą elementu „ document.querySelector() ' metoda. Zastosuj również „ tekstZawartość ”, aby przypisać omówioną wcześniej zwiększoną liczbę kliknięć do elementu span.
Dane wyjściowe będą wyglądać następująco:
Funkcjonalność inkrementowanego timera po każdym kliknięciu można zaobserwować na powyższym wyjściu.
Podejście 2: Symuluj kliknięcie za pomocą JavaScript za pomocą metody addEventListener()
„ dodajOdbiornikZdarzeń() ” metoda przydziela procedurę obsługi zdarzeń do elementu. Ta metoda może być zaimplementowana poprzez dołączenie określonego zdarzenia do elementu i ostrzeganie użytkownika o wyzwoleniu zdarzenia.
Składnia
element. addEventListener ( wydarzenie, funkcja )W podanej składni:
- “ wydarzenie ” odnosi się do nazwy wydarzenia.
- “ funkcjonować ” wskazuje na funkcję do wykonania po wystąpieniu zdarzenia.
Przykład
Poniższa demonstracja wyjaśnia podaną koncepcję:
< środek >< ciało >< a href = „#” ID = 'połączyć' > Kliknij w link a >
ciało > środek >
< scenariusz >
być kozą = dokument. getElementById ( 'połączyć' ) ;
Dostawać. addEventListener ( 'Kliknij' , ( ) => alarm ( „Kliknij Symulowane!” ) )
scenariusz >
W powyższym kodzie:
- Najpierw określ „ Kotwica ” tag do uwzględnienia określonego linku
- W części kodu JavaScript uzyskaj dostęp do utworzonego linku za pomocą „ document.getElementById() ' metoda.
- Na koniec zastosuj „ dodajOdbiornikZdarzeń() ” metoda na dostęp” połączyć ”. „ Kliknij w tym przypadku dołączone jest zdarzenie, które spowoduje powiadomienie użytkownika o kliknięciu w utworzony link.
Wyjście
Podejście 3: Symuluj kliknięcie za pomocą JavaScript za pomocą metody click()
„ Kliknij() ” metoda wykonuje symulację kliknięcia myszą na elemencie. Ta metoda może być używana do symulowania kliknięcia bezpośrednio do dołączonych przycisków, zgodnie z nazwą.
Składnia
element. Kliknij ( )W podanej składni:
- “ element ” wskazuje na element, na którym zostanie wykonane kliknięcie.
Przykład
Poniższy fragment kodu wyjaśnia podaną koncepcję:
< środek >< ciało >< h3 > Znalazłeś ten strona pomocna ? h3 >
< przycisk po kliknięciu = 'symulujkliknięcie()' ID = 'symulować' > TAk przycisk >
< przycisk po kliknięciu = 'symulujkliknięcie()' ID = 'symulować' > Nie przycisk >
< h3 identyfikator = 'głowa' styl = 'kolor tła: jasnozielony;' > h3 >
ciało > środek >
- Najpierw umieść podany nagłówek w „ <środek> ” tag.
- Następnie utwórz dwa różne przyciski o określonym identyfikatorze.
- Dołącz również „ na kliknięcie ” zdarzenie z wywołaniem funkcji symulClick().
- W następnym kroku dodaj kolejny nagłówek z określonym „ ID ” w celu powiadomienia użytkownika, gdy tylko „ Kliknij ” jest symulowane.
Teraz przejdź przez poniższe linie JavaScript:
< scenariusz >symulacja funkcjiKliknij ( ) {
dokument. getElementById ( 'symulować' ) . Kliknij ( )
pozwól dostać = dokument. getElementById ( 'głowa' )
Dostawać. tekst wewnętrzny = „Kliknij Symulowane!”
}
scenariusz >
- Zdefiniuj funkcję „ symulujkliknięcie() ”.
- Tutaj uzyskaj dostęp do utworzonych przycisków za pomocą „ document.getElementById() ” i zastosuj metodę „ Kliknij() ” metoda im.
- Teraz, podobnie, uzyskaj dostęp do przydzielonego nagłówka i zastosuj „ tekst wewnętrzny ”, aby wyświetlić podany komunikat jako nagłówek po symulowanym kliknięciu.
Wyjście
Na powyższym wyjściu widać, że oba utworzone przyciski symulują kliknięcie.
Ten blog pokazuje, jak zastosować symulację kliknięcia za pomocą JavaScript.
Wniosek
Jakiś ' na kliknięcie „wydarzenie”, „ addEventListener() ” metoda lub „ Kliknij() ” można wykorzystać do symulacji kliknięcia za pomocą JavaScript. Jakiś ' na kliknięcie Zdarzenie ” można zastosować do symulacji kliknięcia za każdym razem, gdy przycisk zostanie kliknięty w postaci licznika. „ addEventListener() ” można wykorzystać do dołączenia zdarzenia do linku i powiadomienia użytkownika o symulacji kliknięcia. „ Kliknij() ” można zastosować do utworzonych przycisków i wykonać wymaganą funkcjonalność dla każdego z przycisków. W tym artykule wyjaśniono, jak zastosować symulację kliknięcia w JavaScript.