首页 > web前端 > js教程 > 如何避免 JavaScript 中 Onclick 函数过早执行

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

Linda Hamilton
发布: 2024-10-22 07:13:31
原创
1002 人浏览过

How to Avoid Premature Execution of Onclick Functions in JavaScript

单击之前执行 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中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板