aタグの本来の使い道は別サイトに遷移させることですが、モーダルなどの実装をする際にaタグをイベントのトリガーとする場合があります。このような場合、aタグのデフォルト機能を無効化する必要があります。
本記事では、JavaScriptを使ってaタグを無効化・遷移させない方法について解説しています。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
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>