<A>タグをクリックした際にページが切り替わらないようにする - JavaScript

<A>タグにonClickイベントなどを実装した場合、リンクをクリックした際にページの切り替えを起こさないようにした場合があります。<A>タグクリック時にページ切り替えをキャンセルするコードを紹介します。

記述方法

<A>タグのhrefに値"javaScript:void(0)"を設定するとリンククリック時にページ遷移を無効にできます。

コード例

  <a href="javaScript:void(0)" onclick="alert()">てすと</a>

上記のコードの場合、リンクをクリックすると onclickイベントは実行されメッセエージダイアログボックスが表示されますが、ページは切り替わりません。

例

  <a href="javaScript:void(0)" onclick="alert('めっせーじ')">テストのリンク</a>

テストのリンク

別の記述方法

<A>タグのhrefに値"#"を記述し、onclickイベントで戻り値にfalseを返す記述方法により、リンククリック時のページ遷移を無効にできます。

コード例

  <a href="#" onclick="alert();return false;">てすと</a>

例

  <a href="#" onclick="alert('めっせーじ');return false;">テストのリンク</a>

テストのリンク