【HTML・CSS・JavaScript】aタグのリンクを無効にする

aタグのリンクを無効にしたい場合の、HTML・CSS・JavaScriptそれぞれの方法です。
単にリンクを無効にしたいだけであれば、href属性を外してtabindex="-1"を付けるのが最もシンプルで、デメリットもありません。

HTMLの場合

href属性を外してtabindex="-1"を付けます

これを

<a href="https://www.hoge.com">

こう

<a tabindex="-1">

CSSの場合

pointer-events: noneを指定します。

a{
  pointer-events: none
}

JavaScriptの場合

javascript:void(0)

htmlタグに直接書く場合はjavascript:void(0)をhrefに指定します。

<a href="javascript:void(0)">テキスト</a>

preventDefault()

処理の中でpreventDefault()を使うことででリンクを無効にすることも可能です。

const link = document.querySelector(".link");

link.addEventListener("click", (event) => {
  event.preventDefault();
});