ハイパーリンクのコールバック関数には「href」と「onclick」のどちらを使用するのが良いですか?

ハイパーリンクのコールバック関数の href と onclick の比較

HTML でハイパーリンクを作成する場合、クリック時に特定の JavaScript コードを実行するコールバック関数を定義するオプションがあります。これは、href 属性または onclick イベント ハンドラーのいずれかを使用して実現できます。

href 属性

次の例に示すように、JavaScript コードを href 属性に添付することは、簡単な解決策のように思えるかもしれません。 :

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

ただし、このアプローチにはいくつかの点があります欠点:

• ブラウザの「javascript:」 URL へのリダイレクトがトリガーされ、混乱を引き起こし、デバッグが妨げられる可能性があります。
• JavaScript 関数名に特殊文字が含まれている場合、機能が中断される可能性があります。 URL 構文。

onclick イベントハンドラー

onclick イベント ハンドラーの使用は、いくつかの理由からより好ましい方法です。

• 不必要なブラウザーのリダイレクトを回避します。
• 維持することで、カプセル化と編成が向上します。 HTML とは別の JavaScript コード。

<a>

最適化onclick アプローチ

onclick を使用する方が優れていますが、考慮すべきさらなる改善点があります。

• return false を使用します。ブラウザがリンクをたどり、望ましくないリダイレクトが発生する可能性を防ぐため。
• 視覚障害のあるユーザーにコンテキストを提供するには、title 属性を追加します。
• JavaScript の場合、関連する代替案を指す href 属性を指定します。

推奨ベスト プラクティス

コードのパフォーマンスとアクセシビリティを最適化するには、以下を考慮してください。 jQuery などの JavaScript フレームワークを使用して、要素 ID に基づいて onclick ハンドラーをアタッチします:

$('#myLink').click(function() { MyFunction(); return false; });

以上がハイパーリンクのコールバック関数には「href」と「onclick」のどちらを使用するのが良いですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。