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

このページのタグ:[HTML] [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>
テストのリンク
プライバシー    iPentecについて
iPentec all rights reserverd. (ISDC)