Maison  >  Article  >  interface Web  >  Comment éviter l'exécution prématurée des fonctions Onclick en JavaScript

Comment éviter l'exécution prématurée des fonctions Onclick en JavaScript

Linda Hamilton
Linda Hamiltonoriginal
2024-10-22 07:13:31886parcourir

How to Avoid Premature Execution of Onclick Functions in JavaScript

Exécution de la fonction Onclick avant de cliquer : un piège courant en Javascript

En Javascript, la fonction onclick peut être utilisée pour attribuer une action à un élément HTML lorsque vous cliquez dessus. Cependant, les développeurs sont souvent confrontés à un problème où la fonction est exécutée immédiatement après la création de l'élément, avant même de cliquer dessus.

Dans le code Javascript fourni, le développeur vise à créer un lien qui déclenche une fonction lorsqu'on clique dessus au lieu de redirection vers une nouvelle page. Cependant, la fonction onclick (secondFunction) est appelée immédiatement en raison d'une méthode d'affectation incorrecte.

L'erreur réside dans la ligne :

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

Ici, la secondFunction() est directement invoquée , ce qui signifie que la fonction s'exécute dès qu'elle est définie. Pour résoudre ce problème, il doit être attribué comme suit :

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

En référençant la fonction sans parenthèses, le code attribue la fonction elle-même, et non sa valeur de retour. Cela garantit que la fonction est exécutée uniquement lorsque l'événement onclick se produit.

Le code correct devrait ressembler à :

<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);

}

En adoptant ces modifications, la fonction onclick sera appelée de manière appropriée lorsque l'on clique sur l'élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn