JavaScript 関数をトリガーするときにハイパーリンク機能を保持するにはどうすればよいですか?

JavaScript - コールバック関数をトリガーしながらハイパーリンクの機能を保持する

ハイパーリンクのクリック時に JavaScript 関数を実装する場合、開発者は、スクリプトを href に配置するか、それともスクリプトを配置するかを選択するというジレンマに遭遇する可能性があります。 onclick 属性。この記事では、各アプローチの違いと利点について説明します。

href 属性

href 属性内に関数呼び出しを含めると、クリック時にスクリプトを実行できますが、リダイレクトもトリガーされます。現在のページから移動せずにアクションを実行することが目的の場合、これは望ましくない可能性があります。

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

onclick 属性

対照的に、onclick 属性を使用すると、JavaScript 関数がイベントをクリックすると、リダイレクトを発生させずにスクリプトを実行できるようになります。

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

推奨実践

onclick 関数の実行時にブラウザが href リンクをたどらないようにするには、return false を追加することをお勧めします。関数呼び出しの後:

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

ただし、この方法は JavaScript をサポートするブラウザーに依存します。 JavaScript をサポートしていないブラウザの場合、リンクはデフォルトで割り当てられた URL になります。

さらなる機能強化

アクセシビリティを向上するには、クリックによってトリガーされるアクションを説明する title 属性を指定します。

<a href="#" title="Click to do something" onclick="my_function();return false;">...</a>

ブラウザが存在しない URL に移動しないようにするには、プレースホルダーを使用しますURL:

<a href="PleaseEnableJavascript.html" onclick="my_function();return false;">...</a>

フレームワークのベスト プラクティス

最適な結果を得るには、jQuery などの JavaScript フレームワークを使用して要素 ID に基づいて onclick ハンドラーをアタッチします:

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

慎重に属性とベスト プラクティスを考慮すると、開発者はハイパーリンクの機能を維持しながら、ハイパーリンクのクリック時に JavaScript 関数を実行できるため、シームレスなユーザー操作が保証されます。体験してください。

以上がJavaScript 関数をトリガーするときにハイパーリンク機能を保持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。