Href と Onclick: ハイパーリンク上の JavaScript コールバック関数にはどちらが適していますか?

JavaScript - ハイパーリンクのコールバック関数に href と onclick を使用する

JavaScript でハイパーリンクを操作する場合、リダイレクトをトリガーせずにクリック時に関数を実行したい場合があります。 。これを実現するには、href 属性と onclick 属性の両方を使用できますが、考慮すべき相違点と利点があります。

href 属性の使用

href 属性は主にリンクされたリソースの URL を指定するために使用されます。ただし、javascript: プロトコルを使用して、JavaScript を href 値内に含めることができます。

<a href="javascript:my_function();window.print();">...</a>

このアプローチでは、my_function 関数が実行され、window.print() 関数がトリガーされます。ただし、これにはいくつかの欠点があります。

• これは、ターゲット ページを指定するという href 属性の意味論的な意味に違反します。
• 一部のブラウザでは、次の理由により警告がトリガーされる可能性があります。混合コンテンツ (同じ属性内の JS と HTML)。
• ハイパーリンクをたどるブラウザの通常の動作を妨げる可能性があります。

onclick 属性の使用

このアプローチは意味的により正確で、追加のイベント ハンドラーや修飾子を指定できます。 false を返すなど。

<a href="#" onclick="my_function();">...</a>

推奨事項

どちらの方法でも機能しますが、一般的には、次の理由により、href 属性ではなく onclick 属性を使用することをお勧めします。 :

懸念事項の分離:
• href 属性はナビゲーションに使用する必要があり、onclick 属性は特にクリック イベントの処理に使用します。
Clarity保守性:
• onclick 属性を使用すると、コードの目的の理解と保守が容易になります。
柔軟性:
• onclick 属性により、追加のイベント ハンドラーをより柔軟にアタッチできます。
さらに、jQuery などの JavaScript フレームワークを使用すると、onclick イベントを処理するためのより堅牢で便利な方法が提供されます。

以上がHref と Onclick: ハイパーリンク上の JavaScript コールバック関数にはどちらが適していますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。