リンク先のページが未公開の時や、スマホの時だけリンクさせたい、一時的にリンクを無効にしたい場合があります。そんな時に使える無効化する方法をいくつか紹介・解説していきます。
CSSのpointer-events: none;を使って無効にする
まずはCSSでの無効化です。
無効化したい要素にpointer-events: none;を設定する事で簡単に無効化できます。無効化を解除したい場合は、CSSの記述を削除、またはクラス化していればクラスを外すだけとなります。
以下のCSSで簡単に無効化・解除できますので、個人的には一番使用する方法です。
a {
pointer-events: none;
}注意としては、開発ツール等で無効にしているリンク先のURLを見る事が出来るという点があります。
href属性を削除する
続いて紹介するのが、aタグのhref属性を削除する方法です。href属性を削除する事で、リンクを無効化する事ができます。
<a>aタグのリンクを無効にする方法【HTML/CSS/JS】</a>href属性を削除しても問題はないのか
href属性を削除しても問題はないのか?
という疑問があるかと思いますが、WHATWGの仕様書では問題は無いようです。
ただし、この方法だとhref属性を削除してしまいますので、また有効にしたい場合はHTMLを変更する手間が少し出てきます。
Javascriptでクリック時のイベントを無効にする
さいごに紹介するのが、Javascriptを使用してリンクを無効化する方法です。
Javascriptによるリンクの無効化はいくつかあるのですが、今回は2つだけ紹介いたします。
href属性に「javascript:void(0)」を設定する
まず1つ目がhref属性に「javascript:void(0)」を設定する方法です。
設定方法は以下となります。
<a href="javascript:void(0)">aタグのリンクを無効にする方法【HTML/CSS/JS】</a>これでaタグのリンクを無効化する事が出来ますが、カーソルを当てた際にリンクが有効かのようにカーソルが変更されるのでCSSでカーソルが変わらないようにしてあげてください。
a {
cursor: default;
}上記の方法でリンクの無効化は出来るのですが、こちらの方法はおすすめしません。
簡単に言うと、クリックされた際にvoid関数を実行し、undefindを返す事でリンクが動作しなくなるというものなのですが、意味としてはあまり正しく無く、脆弱性の原因ともなりえますので、特別な理由が無い限りは使用を控えるようにしてください。
preventDefault()を使用する方法
最後に紹介するのが、preventDefault()で要素の処理(イベント)を発生させない方法です。
//対象の要素を指定する
document.querySelector("a").addEventListener("click", (event) => {
event.preventDefault();
});こちらも先ほどと同じく、カーソルが変わってしまうので、CSSでカーソルを変更した方がいいかと思います。
Javascriptによるリンク無効化を2種紹介しましたが、わざわざJavascriptを記述してまでこちらの方法を使用するメリットもあまりないように感じます。(特別な理由やギミック等無い限り)
さいごに
いかがでしたでしょうか。
それぞれ一長一短ありますが、個人的には最初のCSSによる方法をよく使用しています。その都度適切な方法を選択してリンクを無効化しましょう。
