CSSだけでaタグのリンクやJavaScriptのclickイベントを無効化する

2019.12.7 2019.12.14

aタグのdisable時などリンクを不可にしたい時ってありますよね。
以前はspanタグに置き換える方法で対応をしていましたが、
モダンブラウザ向けであればCSSだけでもリンク不可にすることが可能です！

無効化するコード

.btn {
  pointer-events: none;
}

要素自体のクリックイベントが走らなくなるので、aタグのリンク無効化だけでなく、JSのイベントも走らなくなります。タブのactive要素などでも活用できます！

pointer-events: noneでボタンを押せないようにすると、代わりにボタン内のテキストが選択可になってしまいます。
この挙動がボタン感を損なってしまい、あまり好きではありません。。
ということで私の場合はuser-selectも合わせて設定します。

.btn {
  pointer-events: none;
  user-select: none;
}

※各ブラウザの対応状況に合わせてベンダープレフィックスを付与してください。

.btn {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

下記のボタンを何度かクリックして確認してみてください。