【JavaScript】aタグを無効化する方法

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

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

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

本書情報
著者	山田祥寛
発売日	2016/9/30
ページ数	782ページ
Kindle版	○
レビュー (Amazon)	(146件)

ＪａｖａＳｃｒｉｐｔ本格入門モダンスタイルによる基礎から現場での応用まで改訂新版/技術評論社/山田祥寛

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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

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

動画の詳細はこちら

Contents

1 aタグを遷移させない2つの方法
- 1.1 javascript:void(0)
- 1.2 preventDefault()

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>