Controlla se l'elemento è stato fatto clic su JavaScript

Durante la creazione di moduli, i programmatori potrebbero voler aggiungere una restrizione sul pulsante di invio quando è cliccato più volte, e talvolta ci sono alcune situazioni in cui i programmatori devono verificare se il pulsante viene fatto clic o meno, come durante i test. Per fare ciò, utilizzare l'evento Click sull'elemento con l'aiuto dell'ascoltatore di eventi.

Questo tutorial dimostrerà come verificare che l'elemento viene già fatto clic su JavaScript.

Come verificare se l'elemento è stato fatto clic su JavaScript?

Per verificare se si fa clic su un elemento, associare il listener dell'evento click dopo aver ottenuto il riferimento dell'elemento utilizzando il metodo getElementById ().

Dai un'occhiata ad alcuni esempi per una chiara comprensione.

Esempio 1: verificare se l'elemento è già stato fatto clic
Nel file HTML, in primo luogo, crea un modulo semplice con un campo di testo di input e un pulsante:

Crea un pulsante di invio con l'ID "invia"Verrà utilizzato per accedere al riferimento del pulsante in JavaScript:

Invia

Nel file JavaScript, aggiungi il codice di seguito:

VAR SUDMBUTTON = Documento.getElementById ('Invia');
let bottonclicked = false;
sottomissione.addEventListener ('Click', Function HandleClick ()
console.log ("Pulsante di invio viene cliccato");
if (bottonclicked)
console.log ("il pulsante di invio ha già fatto clic");

ButtonClicked = true;
);

Nel blocco del codice sopra:

• Innanzitutto, ottieni il riferimento del pulsante usando il “getElementById ()" metodo.
• Crea una variabile "pulsante"E impostalo come"falso".
• Chiama il "addEventListener ()"Ciò gestirà l'evento Click definendo il"HandleClick ()" funzione.
• Stampa il messaggio sul primo pulsante e fai clic sulla funzione definita.
• Quando viene fatto clic sullo stesso pulsante, stampare il messaggio "Il pulsante di invio ha già fatto clic su".
• Modificare lo stato del "pulsante"Proprietà a"VERO".

L'output per il codice dato sarà il seguente:

Esempio 2: limitare il pulsante Clicca dopo un singolo clic
Per limitare il pulsante Invia clic, scrivere il codice sotto fornito nel file JavaScript o il tag:

VAR SUDMBUTTON = Documento.getElementById ('Invia');
let bottonclicked = false;
sottomissione.addEventListener ('Click', Function HandleClick ()
if (bottonclicked)
ritorno;

console.log ("Pulsante di invio viene cliccato");
ButtonClicked = true;
);

Nel codice sopra dato:

• Innanzitutto, ottenere il riferimento del pulsante di invio utilizzando l'ID assegnato con l'aiuto di "getElementById ()" metodo.
• Crea una nuova variabile chiamata "pulsante"E assegnare il suo valore a"falso".
• Nel "addEventListener ()"Metodo, definire una funzione chiamata"HandleClick ()"Per fare clic su eventi.
• Dopo aver fatto clic sul pulsante, impostare il valore di "pulsante"Proprietà a"VERO".

In questo scenario, quando il pulsante viene cliccato per la prima volta, verrà visualizzato il messaggio aggiunto. Nell'altro caso, non succederà nulla facendo clic sullo stesso pulsante:

Tutte le informazioni necessarie relative al controllo se l'elemento è già fatto clic o non utilizzando JavaScript in questo post.

Conclusione

Per verificare che l'elemento viene già fatto clic, utilizzare il metodo AddeventListener () sull'elemento dopo aver ottenuto il riferimento dell'elemento utilizzando il metodo getElementByID (). Inoltre, il valore della proprietà selezionata del pulsante può anche aiutare in questo senso. Questo tutorial ha descritto la procedura per verificare se l'elemento è già fatto clic su JavaScript.