Jak anulować wydarzenia w JavaScript?

Jak anulować wydarzenia w JavaScript?

Podczas aktualizacji strony internetowej lub strony internetowej są sytuacje, w których niektóre zawarte linki nie są już potrzebne lub stają się nieistotne. Oprócz tego skuteczne zarządzanie ruchem konkretnej witryny. W takich przypadkach anulowanie zdarzeń w JavaScript robi cuda w wyłączaniu niektórych funkcjonalności i obsłudze takich scenariuszy.

Jak anulować wydarzenia w JavaScript?

Następujące podejścia można wykorzystać do anulowania zdarzeń w JavaScript:

    • "PreventDefault ()" metoda.
    • "Wartość logiczna" zbliżać się.
    • "stoppropagation ()" metoda.

Podejście 1: Anuluj zdarzenia w JavaScript przy użyciu metody zapobieganiaDefault ()

„„PreventDefault ()”Metoda anuluje załączone zdarzenie, jeśli jest ono anulowane. Tę metodę można wykorzystać do odłączenia załączonego zdarzenia od dostępnego łącza, tym samym zapobiegając wykonaniu działania.

Składnia

wydarzenie.PreventDefault ()


W podanej składni:

    • "wydarzenie”Odnosi się do odłączenia wydarzenia.

Przykład

Przejrzyj poniżej poddywany kod-snippet:

Wydarzenie kliknięcia zostanie anulowane!


Odwiedź stronę Google
dokument.getElementById („strona”).addEventListener („kliknij”, funkcja (Anuluj)
anulować.PreventDefault ();
);


Postępuj zgodnie z poniższymi krokami:

    • Po pierwsze, uwzględnij podane nagłówek, które ma być wyświetlane w modelu Object Document (DOM).
    • Następnie określ „URL" używając "Href" atrybut.
    • Teraz, w części kodu JavaScript, dostęp do określonego adresu URL.
    • Przywiązaj także „Kliknij„Zdarzenie z adresem URL za pomocą funkcji za pomocą„addEventListener ()" metoda.
    • Wreszcie „„PreventDefault ()”Metoda zostanie zastosowana za pomocą parametru funkcji, aby odłączyć załączone zdarzenie.

Wyjście

Podejście 2: Anuluj zdarzenia w JavaScript, zwracając wartość logiczną

Takie podejście można wdrożyć, zwracając „FAŁSZ„Wartość logiczna po wyzwalanym wydarzeniu.

Przykład

Poniższe wiersze kodu pokazują określoną koncepcję:


funkcja anulowanie ()
zwrócić fałsz;
Alert („To instrukcja nie będzie wyświetlana”)


W powyższym fragmencie kodu:

    • Po pierwsze, w „„„Tag, przydzielić pole tekstowe wejściowe.
    • Dołącz także „oninput„Wydarzenie z określonym„symbol zastępczy" wartość. Spowoduje to wywołanie określonej funkcji po wprowadzeniu tekstu.
    • Teraz, w części kodu JavaScript, zadeklaruj funkcję o nazwie „anulowanie ()". W swojej definicji zwróć wartość logiczną „FAŁSZ„Aby anulować dołączone„wydarzenie".
    • Na koniec określ wyznaczoną wiadomość w polu alertu. Zwrócona wartość logiczna spowoduje uniknięcie wyświetlania dialogu.

Wyjście


W powyższym wyjściu można zauważyć, że po dostępnej funkcji okno dialogowe alertu nie jest wyświetlane w ten sposób anulując załączone zdarzenie.

Podejście 3: Anuluj zdarzenia w JavaScript za pomocą metody StopPropagation ()

„„stoppropagation ()”Metoda zapobiega propagowaniu tego samego zdarzenia. Tę metodę można wykorzystać do przestania propagowania między dwoma Divami po sprawdzeniu pola wyboru.

Składnia

wydarzenie.stoppropagation ()


Przykład

Obserwuj następujące wiersze kodu:

Kliknij stronę internetową, aby zaobserwować zmianę:


Linuxhint
Strona internetowa




Sprawdź, czy zaprzestanie propagacji:

    • Podobnie w pierwszym kroku obejmują podane nagłówek.
    • Teraz uwzględnij dwa „div”Tagi z załączonym„na kliknięcie”Zdarzenia z każdym z nich wywołującym dwa różne funkcje element2 () i element1 ().
    • Dołącz także pole wyboru z określonym identyfikatorem. To pole wyboru spowoduje zatrzymanie propagacji między dwoma Divami.

Teraz spójrz na następujące wiersze kodu JavaScript:

element funkcji 1 (e)
alert („kliknąłeś stronę internetową”);
if (dokument.getElementById („Check”).sprawdzony)
mi.stoppropagation ();


funkcja element2 ()
alert („kliknąłeś Linuxhint”);


W powyższym kodzie JS:

    • Zdefiniuj funkcję o nazwie „element1 ()". Tutaj parametr „mi" odnosi się do "wydarzenie”Wystrzelone w części HTML kodu.
    • W swojej definicji wyświetl okno dialogowe Alert o podanej wiadomości.
    • Następnie dostęp do utworzonego pola wyboru po jego identyfikatorze za pomocą „getElementById ()" metoda. Zastosuj także „sprawdzony„Właściwość do niego, aby sprawdzić warunek wyboru wyboru.
    • Następnie zastosuj „stoppropagation ()„Metoda odnosząca się do parametru„mi". Spowoduje to zatrzymanie propagacji z jednej funkcji na drugą funkcję.
    • Podobnie zdefiniuj inną funkcję „element2 ()„Do propagowania. Ta funkcja będzie funkcjonalna przed propagacją.

Wyjście


Tutaj obserwuje zachowanie po kliknięciu div po sprawdzeniu pola wyboru.

Zebraliśmy podejścia do anulowania wydarzeń w JavaScript.

Wniosek

„„PreventDefault ()„Metoda,„wartość logiczna”Podejście lub„stoppropagation ()„Metoda można wykorzystać do anulowania zdarzeń w JavaScript. Pierwszą metodę można zaimplementować, aby odłączyć załączone zdarzenie, w wyniku czego wyłączał link. Podejście wartości logicznej zwraca „FAŁSZ„Wartość logiczna po wyzwalanym wydarzeniu. Metodę StopPropagation () można zastosować, aby przestać propagować się między dwoma Divami za pomocą dołączonego pola wyboru. Ten samouczek wyjaśnił, że anuluje wydarzenia w JavaScript.