サイトのカスタマイズでアンカーリンクを無効にするときに、［ pointer-events ］というプロパティを使うことがある。

JavaScript のイベントを禁止できる便利なプロパティなので、以下、覚え書き。

pointer-events プロパティとは

pointer-events プロパティはマウスなどのポインターデバイスのイベント（クリックなど）を制御できる CSS のプロパティ。
アンカーリンクに［ pointer-events: none; ］を指定するとリンクを無効化できる。

※ pointer-events プロパティはポインターデバイスのイベントは制御できるけど、キーイベントは制御できないので、キーボードを用いて操作した場合はリンクは無効化されないので注意。

pointer-events の記述方法

無効化したい a 要素の親要素に、CSS で下記のように記述して指定する。

この記述によってアンカーリンクが無効化される。
デフォルトでは auto になっているので記述する必要は無いけど、none が指定されていて無効化されているものを有効化する時は、auto を記述する。

※ a 要素自身に直接指定すると無効にはならないので、a 要素の親要素に指定するけど、親要素に［ pointer-events: none; ］を指定してリンクを無効にしても、a 要素自身に［ pointer-events: auto; ］ を指定するとリンクは有効になる。

デモ

（例）CSS で作成したボタンのアンカーリンクに［ pointer-events: none; ］を指定。

リンク無効化
リンク無効化

※デモなので、target=”_blank” だけど rel=”noopener noreferrer” は記述していない。

対応ブラウザについて

Google Chrome、Mozila Firefox や iPhone、Android のブラウザは対応しているけど、IE 10 以下ではサポートされていないので、IE は IE 11 以上のみ対応している。

※IE 10 以下で閲覧して上記デモボタンをクリックした場合は、リンクは有効になっている。

使いたい CSS や HTML の機能がどのブラウザで対応しているのか確認する場合、プロパティのブラウザ対応状況を簡単にチェックできる『 Can I use 』というサービスがある。

『 Can I use 』の公式サイトは ⇒ こちら

IE 10 以下ではサポートされていないけど、使いどころが多い pointer-events プロパティはとっても便利。