Sprawdź, czy element został kliknięty za pomocą JavaScript

Podczas tworzenia formularzy programiści mogą chcieć dodać ograniczenie na przycisku przesyłania po kliknięciu wiele razy, a czasem są pewne sytuacje, w których programiści muszą sprawdzić, czy przycisk jest klikany, czy nie, jak podczas testowania. Aby to zrobić, użyj zdarzenia kliknięcia elementu za pomocą słuchacza zdarzenia.

Ten samouczek pokaże, jak sprawdzić, czy element jest już klikany za pomocą JavaScript.

Jak sprawdzić, czy element został kliknięty za pomocą JavaScript?

Aby sprawdzić, czy element jest kliknięty, skojarz słuchacz zdarzeń kliknięć z elementem po uzyskaniu odniesienia elementu za pomocą metody getElementById ().

Sprawdźmy kilka przykładów, aby uzyskać jasne zrozumienie.

Przykład 1: Sprawdź, czy element został już kliknięty
W pliku HTML najpierw utwórz prosty formularz z polem tekstowym wejściowym i przyciskiem:

Utwórz przycisk Prześlij z identyfikatorem „składać„To zostanie użyte do dostępu do odniesienia przycisku w JavaScript:

Składać

W pliku JavaScript dodaj poniżej podany kod:

var submitbutton = dokument.getElementById („prześlij”);
niech ButtonClicked = false;
SubmeTButton.addEventListener („kliknij”, funkcja Handleclick ()
konsola.Log („Zwrot, kliknięto przycisk”);
if (ButtonClicked)
konsola.log („Zwrot, kliknął już”);

ButtonClicked = true;
);

W powyższym bloku kodu:

• Najpierw uzyskaj odniesienie do przycisku za pomocą „getElementById ()" metoda.
• Utwórz zmienną „Buttonclicked”I ustaw go jako„FAŁSZ".
• Zadzwoń do "addEventListener ()„To poradzi sobie z zdarzeniem kliknięcia, definiując„Handleclick ()”Funkcja.
• Wydrukuj wiadomość na pierwszym przycisku i kliknij zdefiniowaną funkcję.
• Gdy ten sam przycisk zostanie ponownie kliknięty, wydrukuj wiadomość „Przycisk Przesyłania już kliknął".
• Zmień status „Buttonclicked„Własność do„PRAWDA".

Wyjście dla danego kodu będzie następujące:

Przykład 2: Ogranicz przycisk Kliknij po jednym kliknięciu
Aby ograniczyć przycisk Prześlij, kliknij, napisz poniższy kod w pliku JavaScript lub tag:

var submitbutton = dokument.getElementById („prześlij”);
niech ButtonClicked = false;
SubmeTButton.addEventListener („kliknij”, funkcja Handleclick ()
if (ButtonClicked)
powrót;

konsola.Log („Zwrot, kliknięto przycisk”);
ButtonClicked = true;
);

W powyższym kodzie:

• Najpierw uzyskaj odniesienie do przycisku przesyłania za pomocą przypisanego identyfikatora za pomocą „getElementById ()" metoda.
• Utwórz nową zmienną o nazwie „Buttonclicked”I przypisz jego wartość do„FAŁSZ".
• W "addEventListener ()„Metoda zdefiniuj funkcję zwaną„Handleclick ()„Aby kliknąć wydarzenia.
• Po kliknięciu przycisku ustaw wartość „Buttonclicked„Własność do„PRAWDA".

W tym scenariuszu, gdy przycisk zostanie kliknięty po raz pierwszy, zostanie wyświetlony dodany komunikat. W drugim przypadku nic się nie wydarzy podczas klikania tego samego przycisku raz po raz:

Wszystkie niezbędne informacje związane z sprawdzaniem, czy element jest już kliknięty, czy nie używając JavaScript, są podane w tym poście.

Wniosek

Aby sprawdzić, czy element jest już kliknięty, użyj metody addEventListener () na elemencie po uzyskaniu odniesienia elementu za pomocą metody getElementById (). Ponadto wartość sprawdzonej właściwości przycisku może również pomóc w tym względzie. W tym samouczku opisano procedurę sprawdzenia, czy element jest już klikany za pomocą JavaScript.