サイトのカスタマイズでアンカーリンクを無効にするときに、[ 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 プロパティはとっても便利。