WEB

CSSのプロパティpointer-eventsでアンカーリンクを無効化する

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

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 プロパティはとっても便利。

関連記事