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

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

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

ITエンジニア特化の転職サイト！
自社内開発求人に強い【クラウドリンク】

先輩くん

年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ！

後輩ちゃん

100％自社内開発の求人だから、SESのように職場環境が変わらないのがいいね！

簡単30秒で無料登録！

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

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

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

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

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>