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() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><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);