JavaScript のイベントを禁止できる便利なプロパティなので、以下、覚え書き。
pointer-events プロパティとは
pointer-events プロパティはマウスなどのポインターデバイスのイベント（クリックなど）を制御できる CSS のプロパティ。
アンカーリンクに［ pointer-events: none; ］を指定するとリンクを無効化できる。
※ pointer-events プロパティはポインターデバイスのイベントは制御できるけど、キーイベントは制御できないので、キーボードを用いて操作した場合はリンクは無効化されないので注意。
pointer-events の記述方法
無効化したい a 要素の親要素に、CSS で下記のように記述して指定する。
.sample a {
pointer-events: none;
}
この記述によってアンカーリンクが無効化される。
デフォルトでは auto になっているので記述する必要は無いけど、none が指定されていて無効化されているものを有効化する時は、auto を記述する。
※ a 要素自身に直接指定すると無効にはならないので、a 要素の親要素に指定するけど、親要素に［ pointer-events: none; ］を指定してリンクを無効にしても、a 要素自身に［ pointer-events: auto; ］ を指定するとリンクは有効になる。
デモ
（例）CSS で作成したボタンのアンカーリンクに［ pointer-events: none; ］を指定。
<div class="sample"><a href="https://hovys.net/pointer" target="_blank" rel="noopener noreferrer">リンク無効化</a></div>
.sample a {
pointer-events: none;
}
.sample a {
width: 300px;
background: #87aebf;
padding: 15px 0;
text-align: center;
font-size: 16px;
display: block;
margin-bottom: 20px;
border-radius: 10px;
color: #fff;
cursor: pointer;
pointer-events: none;
}
.sample a:hover {
background: #e64b21;
text-decoration: none;
}
対応ブラウザについて
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 プロパティはとっても便利。
