So vermeiden Sie eine vorzeitige Ausführung von Onclick-Funktionen in JavaScript

Onclick-Funktionsausführung vor dem Klicken: Eine häufige Gefahr in Javascript

In Javascript kann die Onclick-Funktion verwendet werden, um einem HTML-Element beim Klicken eine Aktion zuzuweisen. Entwickler stehen jedoch häufig vor dem Problem, dass die Funktion sofort bei der Elementerstellung ausgeführt wird, noch bevor darauf geklickt wird.

Im bereitgestellten Javascript-Code möchte der Entwickler einen Link erstellen, der beim Klicken eine Funktion auslöst Weiterleitung auf eine neue Seite. Allerdings wird die Onclick-Funktion (secondFunction) aufgrund einer falschen Zuweisungsmethode sofort aufgerufen.

Der Fehler liegt in der Zeile:

<code class="js">sentNode.setAttribute('onclick', secondFunction());</code>

Hier wird die secondFunction() direkt aufgerufen , was bedeutet, dass die Funktion ausgeführt wird, sobald sie definiert ist. Um dieses Problem zu beheben, sollte es wie folgt zugewiesen werden:

<code class="js">sentNode.setAttribute('onclick', secondFunction);</code>

Durch die Referenzierung der Funktion ohne Klammern weist der Code die Funktion selbst zu, nicht ihren Rückgabewert. Dadurch wird sichergestellt, dass die Funktion nur ausgeführt wird, wenn das Onclick-Ereignis auftritt.

Der korrekte Code sollte wie folgt aussehen:

<br>function startFunction() {</p>
<pre class="brush:php;toolbar:false">var sentNode = document.createElement('a');
sentNode.setAttribute('href', "#");
sentNode.setAttribute('onclick', secondFunction); // Assign function reference
sentNode.innerHTML = "Sent Items";

// Add new element to parent
var parentNode = document.getElementById('parent');
var childNode = document.getElementById('sendNode');
parentNode.insertBefore(sentNode, childNode);

}

Durch die Übernahme dieser Änderungen wird die Onclick-Funktion entsprechend aufgerufen, wenn auf das Element geklickt wird.

Das obige ist der detaillierte Inhalt vonSo vermeiden Sie eine vorzeitige Ausführung von Onclick-Funktionen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!