Vérifiez si l'élément a été cliqué sur JavaScript

Lors de la création de formulaires, les programmeurs peuvent vouloir ajouter une restriction sur le bouton Soumettre lorsque vous cliquez plusieurs fois, et parfois il y a des situations où les programmeurs doivent vérifier si le bouton est cliqué ou non, comme pendant les tests. Pour ce faire, utilisez l'événement Click sur l'élément à l'aide de l'écouteur d'événements.

Ce tutoriel montrera comment vérifier que l'élément est déjà cliqué à l'aide de JavaScript.

Comment vérifier si l'élément a été cliqué à l'aide de JavaScript?

Pour vérifier si un élément est cliqué, associez l'écouteur d'événements de clic à l'élément après avoir obtenu la référence de l'élément à l'aide de la méthode GetElementById ().

Voyons quelques exemples pour une compréhension claire.

Exemple 1: Vérifiez si l'élément a déjà été cliqué
Dans le fichier HTML, créez d'abord une forme simple avec un champ de texte d'entrée et un bouton:

Créez un bouton de soumission avec l'ID "soumettre«Cela sera utilisé pour accéder à la référence du bouton en JavaScript:

Soumettre

Dans le fichier JavaScript, ajoutez le code indiqué ci-dessous:

var soumibutton = document.getElementById («soumettre»);
Laissez boutonClicked = false;
bouton de soumission.addEventListener ('click', fonction handleclick ()
console.journal («le bouton Soumettre est cliqué»);
if (boutonclicched)
console.journal ('le bouton Soumettre a déjà cliqué');

ButtonClicked = true;
);

Dans le bloc de code ci-dessus:

• Tout d'abord, obtenez la référence du bouton à l'aide du "getElementByid ()" méthode.
• Créer une variable "clignotant"Et le définissez comme"FAUX".
• Appeler le "addEventListener ()"Cela gérera l'événement de clic en définissant le"handleclick ()" fonction.
• Imprimez le message sur le premier bouton et cliquez sur la fonction définie.
• Lorsque le même bouton est à nouveau cliqué, imprimez le message "Le bouton Soumettre a déjà cliqué".
• Modifier le statut du «clignotant«Propriété à«vrai".

La sortie du code donné sera la suivante:

Exemple 2: restreignez le bouton cliquer après un seul clic
Pour restreindre le bouton Soumettre Cliquez, écrivez le code ci-dessous dans le fichier JavaScript ou la balise:

var soumibutton = document.getElementById («soumettre»);
Laissez boutonClicked = false;
bouton de soumission.addEventListener ('click', fonction handleclick ()
if (boutonclicched)
retour;

console.journal («le bouton Soumettre est cliqué»);
ButtonClicked = true;
);

Dans le code donné ci-dessus:

• Tout d'abord, obtenez la référence du bouton Soumettre en utilisant son ID attribué à l'aide du «getElementByid ()" méthode.
• Créer une nouvelle variable appelée «clignotant»Et attribuez sa valeur à«FAUX".
• Dans le "addEventListener ()«Méthode, définissez une fonction appelée«handleclick ()"Pour réussir à cliquer sur les événements.
• Une fois le bouton cliqué, définissez la valeur du "clignotant«Propriété à«vrai".

Dans ce scénario, lorsque le bouton est cliqué pour la première fois, le message ajouté sera affiché. Dans l'autre cas, rien ne se passera en cliquant sur le même bouton encore et encore:

Toutes les informations nécessaires liées à la vérification si l'élément est déjà cliqué ou non en utilisant JavaScript est fourni dans cet article.

Conclusion

Pour vérifier que l'élément est déjà cliqué, utilisez la méthode addEventListener () sur l'élément après avoir obtenu la référence de l'élément à l'aide de la méthode GetElementById (). De plus, la valeur de la propriété vérifiée du bouton peut également aider à cet égard. Ce tutoriel a décrit la procédure pour vérifier si l'élément est déjà cliqué à l'aide de JavaScript.