Sjekk om elementet ble klikket ved hjelp av JavaScript

Mens de oppretter skjemaer, kan det være lurt å legge til en begrensning på sendeknappen når de klikker flere ganger, og noen ganger er det noen situasjoner der programmererne trenger å sjekke om knappen er klikket eller ikke, som under testing. For å gjøre det, bruk klikkhendelsen på elementet ved hjelp av arrangementets lytter.

Denne opplæringen vil demonstrere hvordan du sjekker elementet som allerede er klikket ved hjelp av JavaScript.

Hvordan sjekke om elementet ble klikket ved hjelp av JavaScript?

For å sjekke om et element er klikket, kan du knytte klikkhendelseslytteren til elementet etter å ha fått elementets referanse ved hjelp av getElementById () -metoden.

La oss sjekke ut noen eksempler for en klar forståelse.

Eksempel 1: Sjekk om elementet allerede var klikket
I HTML -filen, først, oppretter du en enkel form med et inngangstekstfelt og en knapp:

Opprett en innsendingsknapp med ID “sende inn”Det vil bli brukt til å få tilgang til referansen til knappen i JavaScript:

Sende inn

I JavaScript-filen, legg til den undergitte koden:

VaR SubmitButton = Dokument.getElementById ('Send');
La ButtonClicked = FALSE;
SubmitButton.AddEventListener ('Klikk', funksjon HandleClick ()
konsoll.Logg ('Send -knappen er klikket');
if (knappklikket)
konsoll.Logg ('Send -knappen har allerede klikket');

ButtonClicked = True;
);

I kodeblokken ovenfor:

• Først må du få referansen til knappen ved å bruke "getElementById ()”Metode.
• Lag en variabel “knappklikket”Og sett det som“falsk”.
• Ring "AddEventListener ()”Som vil håndtere klikkhendelsen ved å definere“HandleClick ()”Funksjon.
• Skriv ut meldingen på den første knappen og klikk på den definerte funksjonen.
• Når den samme knappen er klikket igjen, skriv ut meldingen “Send -knappen har allerede klikket”.
• Endre statusen til “knappklikket”Eiendom til“ekte”.

Utgangen for den gitte koden vil være som følger:

Eksempel 2: Begrens knappeklikk etter et enkelt klikk
For å begrense innsendingsknappeklikket, skriv den undervernede koden i JavaScript-filen eller taggen:

VaR SubmitButton = Dokument.getElementById ('Send');
La ButtonClicked = FALSE;
SubmitButton.AddEventListener ('Klikk', funksjon HandleClick ()
if (knappklikket)
komme tilbake;

konsoll.Logg ('Send -knappen er klikket');
ButtonClicked = True;
);

I den ovennevnte koden:

• Først må du sende inn knappreferansen ved å bruke den tildelte ID -en ved hjelp av "getElementById ()”Metode.
• Opprett en ny variabel kalt “knappklikket”Og tilordne verdien til“falsk”.
• I “AddEventListener ()”Metode, definer en funksjon som heter“HandleClick ()”For å klikke på hendelser.
• Etter at knappen er klikket, må du angi verdien av "knappklikket”Eiendom til“ekte”.

I dette scenariet, når knappen er klikket for første gang, vises den ekstra meldingen. I det andre tilfellet vil ingenting skje mens du klikker på samme knapp igjen og igjen:

All nødvendig informasjon relatert til å sjekke om elementet allerede er klikket eller ikke ved hjelp av JavaScript er gitt i dette innlegget.

Konklusjon

For å sjekke elementet er allerede klikket, bruk AddEventListener () -metoden på elementet etter å ha fått elementets referanse ved hjelp av getElementById () -metoden. Dessuten kan verdien av den sjekket egenskapen til knappen også hjelpe i denne forbindelse. Denne opplæringen beskrev prosedyren for å sjekke om elementet allerede er klikket ved hjelp av JavaScript.