Überprüfen Sie, ob das Element mit JavaScript geklickt wurde

Während des Erstellens von Formularen möchten Programmierer möglicherweise eine Einschränkung auf die Schaltfläche Senden hinzufügen, wenn Sie mehrmals klicken, und manchmal gibt es einige Situationen, in denen die Programmierer überprüfen müssen, ob die Schaltfläche klickt oder nicht, wie während des Tests. Verwenden Sie dazu das Klickereignis im Element mit Hilfe des Event -Listeners.

In diesem Tutorial wird gezeigt, wie das Element bereits über JavaScript geklickt wird.

So überprüfen Sie, ob das Element mit JavaScript geklickt wurde?

Um zu überprüfen, ob ein Element klickt ist, verknüpfen Sie den Klickereignislistener mit dem Element, nachdem Sie die Referenz des Elements mit der Methode getElementById () erhalten haben.

Schauen wir uns einige Beispiele für ein klares Verständnis an.

Beispiel 1: Überprüfen Sie, ob das Element bereits angeklickt wurde
Erstellen Sie in der HTML -Datei zunächst ein einfaches Formular mit einem Eingabentextfeld und einer Schaltfläche:

Erstellen Sie mit der ID eine Schaltfläche Senden ““einreichenMit deren Zugriff auf die Referenz der Schaltfläche in JavaScript:

Einreichen

Fügen Sie in der JavaScript-Datei den folgenden Code hinzu:

var Subjektbutton = Dokument.GetElementById ('Submit');
lass buttonclicked = false;
Submitbutton.AddEventListener ('Click', Function HandleClick ()
Konsole.Log ('Schaltfläche "Senden wird geklickt");
if (buttonclicked)
Konsole.log ('Schaltfläche Senden hat bereits geklickt');

buttonclicked = true;
);

Im obigen Codeblock:

• Holen Sie sich zunächst die Referenz der Schaltfläche mit der “GetElementById ()" Methode.
• Erstellen Sie eine Variable “Buttonclicked"Und setzen Sie es als"FALSCH”.
• Ruf den "AddEventListener ()"Dadurch wird das Klickereignis behandelt, indem Sie die" definieren "Handleclick ()”Funktion.
• Drucken Sie die Nachricht auf der ersten Schaltfläche und klicken Sie auf die definierte Funktion.
• Wenn erneut auf die gleiche Schaltfläche klickt, drucken Sie die Nachricht aus “Die Schaltfläche Senden hat bereits geklickt”.
• Ändern Sie den Status der “Buttonclicked”Eigentum zu“WAHR”.

Die Ausgabe für den angegebenen Code ist wie folgt:

Beispiel 2: Beschränken Sie die Schaltfläche Klicken Sie nach einem einzelnen Klick
Um die Schaltfläche "Senden" einzuschränken, schreiben Sie den folgenden Code in die JavaScript-Datei oder das Tag: Tag:

var Subjektbutton = Dokument.GetElementById ('Submit');
lass buttonclicked = false;
Submitbutton.AddEventListener ('Click', Function HandleClick ()
if (buttonclicked)
zurückkehren;

Konsole.Log ('Schaltfläche "Senden wird geklickt");
buttonclicked = true;
);

Im oben gegebenen Code:

• Holen Sie zunächst die Schaltfläche "Senden" mithilfe der zugewiesenen ID mit Hilfe des “GetElementById ()" Methode.
• Erstellen Sie eine neue Variable namens “Buttonclicked”Und zuweisen seinen Wert an“FALSCH”.
• Im "AddEventListener ()"Methode, eine Funktion namens" definieren "Handleclick ()”Um es zu schaffen, auf Ereignisse zu klicken.
• Setzen Sie nach dem Klicken auf die Schaltfläche den Wert der “Buttonclicked”Eigentum zu“WAHR”.

In diesem Szenario wird die hinzugefügte Nachricht angezeigt, wenn die Schaltfläche zum ersten Mal geklickt wird. Im anderen Fall wird nichts passieren, wenn Sie immer wieder auf die gleiche Schaltfläche klicken:

Alle erforderlichen Informationen zur Überprüfung, ob das Element bereits angeklickt oder nicht JavaScript verwendet wird, finden Sie in diesem Beitrag.

Abschluss

Um das bereits angeklickte Element zu überprüfen, verwenden Sie die Methode addEventListener () im Element, nachdem Sie die Referenz des Elements mit der Methode getElementById () erhalten haben. Darüber hinaus kann der Wert der überprüften Eigenschaft der Schaltfläche diesbezüglich ebenfalls unterstützen. In diesem Tutorial wurde das Verfahren beschrieben, um zu überprüfen, ob das Element bereits mit JavaScript angeklickt wurde.