aタグの本来の使い道は別サイトに遷移させることですが、モーダルなどの実装をする際にaタグをイベントのトリガーとする場合があります。このような場合、aタグのデフォルト機能を無効化する必要があります。
本記事では、JavaScriptを使ってaタグを無効化・遷移させない方法について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
aタグを遷移させない2つの方法
javascript:void(0)
aタグを無効化する1つ目の方法は、href属性にjavascript:void(0)を設定します。
<a href="javascript:void(0);">遷移させないリンク</a>これは昔からある手法で、最近ではあまり使われなくなりましたが、過去のWebサイトを見るとチラホラ使われていることを見かけます。
<a href="javascript:void(0);">遷移させないリンク</a>
<script>
const elem = document.querySelector("a");
elem.addEventListener("click", function () {
console.log("イベントが実行されました!");
});
</script>preventDefault()
aタグを無効化する2つ目の方法は、preventDefault()を使う方法です。
event.preventDefault();この方法が現在のWeb制作で使われることが多いです。preventDefault()とは、イベント登録時の引数に対して使うことができるデフォルトの動作をキャンセルするメソッドです。
<a href="#">遷移させないリンク</a>
<script>
const elem = document.querySelector("a");
elem.addEventListener("click", function (event) {
event.preventDefault();
console.log("イベントが実行されました!");
});
</script>