JavaScript関数をアクティブ化するために使用されるリンク

JavaScriptリンクに使用する「href」値「#」または「javascript:void(0)」はどれですか?

プレーンJavaScriptを使用してアプリを作成している場合、ユーザーがリンクをクリックしたときに関数をトリガーする必要がある場合があります。

通常、これは2つの方法で実行できます。

実行したい関数が呼び出されたとしますhandleClick()

function handleClick() {
  alert('clicked')
}

最初の方法は、次のようなリンクを使用することです。

<a href="#" onclick="handleClick()">Click here</a>

2番目の方法は使用することです

<a href="javascript:void(0)" onclick="handleClick()">Click here</a>

どちらも非常によく似た構文ですが、唯一の違いはhref属性値。

最初はhref="#"、2番目はhref="javascript:void(0)"。この構文も表示される場合がありますhref="javascript:;"、これは2番目に相当します。

さて、これら2つの方法の動作の違いは何ですか?

ユーザーがクリックするとhref="#"リンク、あなたしなければならないあなたが戻ることを確認してくださいfalseイベントハンドラから、それ以外の場合、ブラウザはページの先頭にスクロールして戻ります。

function handleClick() {
  alert('clicked')
  return false
}

また、これを追加してもJavaScriptが無効になっている、または何らかの理由で実行されない場合でも、ブラウザはページの先頭にスクロールして戻ります。これはほとんどの場合避けるべきことなので、私は個人的に2番目の形式を使用します。href="javascript:void(0)"

両方の方法でhandleClick()JavaScriptが無効になっている場合、またはJavaScriptにエラーがあり、JavaScriptの実行が停止している場合、関数は呼び出されません。

これを防ぐために、で実際のURLを使用できますhrefフォールバックとして、ブラウザはGET HTTPメソッドを使用してユーザーを特定のページに移動しますが、これが常に可能または便利であるとは限りません。

ただし、これはベストプラクティスであり、ベストプラクティスが常に便利であるとは限りません。ただし、理想的なユースケース向けに構築して、問題が発生する可能性のあるすべてのことを無視することはできないため、アプリケーションの設計段階でそれらを考慮に入れる必要があります。 。

何かがうまくいかない場合、ユーザーはあなたとあなたの壊れたリンクを非難します🙂

私の無料ダウンロードJavaScriptビギナーズハンドブック


その他のjsチュートリアル: