AタグにonClickイベントなどを実装した場合、リンクをクリックした際にページが遷移しないようにししたい場合があります。
この記事では、Aタグのクリック時にページ切り替えをしない動作にするコードを紹介します。
Aタグのhrefに値"javaScript:void(0)"を設定するとリンククリック時にページ遷移を無効にできます。
以下のコードの場合、リンクをクリックすると onclickイベントは実行されメッセエージダイアログボックスが表示されますが、ページは切り替わりません。
<a href="javaScript:void(0)" onclick="alert()">てすと</a>
Aタグのhrefに値"#"を記述する方法により、リンククリック時のページ遷移を無効にできます。
<a href="#" onclick="alert();">てすと</a>
Aタグのonclickにreturn false; を記述し、clickイベントでfalseを返すことで、リンククリックを失敗にして、ページ遷移をしない動作にできます。
<a href="https://www.ipentec.com" onclick="alert();return false;">リンクです。</a>
Aタグのhrefに値を空("")にする、または、href属性を記述しない方法により、リンククリック時のページ遷移を無くせます。
<a href="" onclick="alert();">リンクです。</a>
<a onclick="alert();">リンクです。</a>
preventDefault メソッドを呼び出し、デフォルトの動作であるページ遷移を無効にする方法です。
<a href="https://www.ipentec.com" onclick="event.preventDefault();alert();">リンクです。</a>
以下のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>リンクをクリックしてもページ遷移しないデモ</h1>
<a href="https://www.ipentec.com" onclick="alert('Penguin');">テストのリンクです。- 通常のリンク</a><br />
<a href="JavaScript:void(0);" onclick="alert('Penguin');">テストのリンクです。- JavaScript:void(0)</a><br />
<a href="#" onclick="alert('Penguin');">テストのリンクです。- href="#"</a><br />
<a href="https://www.ipentec.com" onclick="alert('Penguin'); return false;">テストのリンクです。- return false</a><br />
<a href="" onclick="alert('Penguin');">テストのリンクです。- href 空</a><br />
<a onclick="alert('Penguin');">テストのリンクです。- href なし</a><br />
<a href="https://www.ipentec.com" onclick="event.preventDefault();alert('Penguin');">テストのリンクです。- preventDefault</a><br />
</body>
</html>
先に紹介した以下のリンクを記述しています。
上記のHTMLファイルを表示します。下図のページが表示されます。
はじめに、一番上の通常にリンクをクリックします。アラートダイアログが表示されます。[OK]ボタンをクリックしてダイアログを閉じます。
ダイアログを閉じると、ページ遷移します。
2番目の[テストのリンクです。- JavaScript:void(0)]をクリックします。アラートダイアログが表示されます。
ダイアログを閉じても、ページ遷移はしません。
3番目の[テストのリンクです。- href="#"]をクリックします。アラートダイアログが表示され、ダイアログを閉じてもページ遷移はしません。
4番目の[テストのリンクです。- return false]をクリックします。こちらもアラートダイアログが表示されます。
ダイアログを閉じてもページ遷移はしません。
5番目の[テストのリンクです。- href 空]をクリックします。こちらもアラートダイアログが表示されます。
ダイアログを閉じてもページ遷移はしません。
6番目の[テストのリンクです。- href なし]はリンクに下線が表示されておらず、通常のテキストの表示ですが、
クリックするとアラートダイアログが表示されます。ダイアログを閉じてもページ遷移はありません。
7番目の[テストのリンクです。- preventDefault]をクリックします。アラートダイアログが表示されます。
ダイアログを閉じてもページ遷移はしません。
Aタグのリンクをクリックしてもページ遷移しない方法を紹介しました。
