如何避免 JavaScript 中 Onclick 函数过早执行

单击之前执行 Onclick 函数：Javascript 中的常见陷阱

在 Javascript 中，onclick 函数可用于在单击时将操作分配给 HTML 元素。然而，开发人员经常面临一个问题，即该函数在元素创建后立即执行，甚至在单击它之前。

在提供的 Javascript 代码中，开发人员的目标是创建一个在单击时触发函数的链接，而不是重定向到新页面。然而，由于赋值方法不正确，onclick函数（secondFunction）立即被调用。

错误在于：

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

这里直接调用了secondFunction() ，这意味着函数一旦定义就运行。要解决此问题，应按如下方式分配：

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

通过引用不带括号的函数，代码分配函数本身，而不是其返回值。这确保了该函数仅在 onclick 事件发生时执行。

正确的代码应如下所示：

<br>function startFunction() {<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);

}

通过采用这些更改，单击元素时将适当地调用 onclick 函数。

以上是如何避免 JavaScript 中 Onclick 函数过早执行的详细内容。更多信息请关注PHP中文网其他相关文章！