JavaScript

【JavaScript】aタグを無効化・遷移させない方法

aタグの本来の使い道は別サイトに遷移させることですが、モーダルなどの実装をする際にaタグをイベントのトリガーとする場合があります。このような場合、aタグのデフォルト機能を無効化する必要があります。

本記事では、JavaScriptを使ってaタグを無効化・遷移させない方法について解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

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>

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村