【CSS】aタグのリンクやJSのクリックイベントを無効にする方法【pointer-events:none】

CSSの「pointer-events」というプロパティを使うと、aタグに指定されたリンクやJSのクリックイベントを無効化できます。

今回はCSSでクリックイベントの消し方とpointer-eventsの特徴について紹介します。

pointer-events: none;

a {
  pointer-events: none;
}

上記のCSSの指定をaタグのリンクや、JavaScriptのクリックイベントを無効にしたいタグに指定すると、クリックしても画面遷移やイベントが発生しません。

このプロパティが誕生する前はJavaScriptなどで無効にしていたと思いますが、これを使えばCSSで手軽に無効化できます。

pointer-eventsはマウスイベントの対象を制御できるプロパティです。

値は「auto」と「none」の2つを指定することができ、初期値は「auto」が指定されます。その他SVG要素のみの場合に、さらに高度な値を指定できるようです。

またpointer-eventsは子要素への継承があるので、親要素にpointer-events: none;をしてすれば、子要素も同じ値が継承されます。

pointer-eventsプロパティは、IE11、Edge、Chrome、FireFox、Safari、基本的にメジャーブラウザすべてに対応しています。

IEはバージョン11までの対応となっているので、IE10以下を対応する場合は、別の方法で処理する必要があります。

例えばレスポンシブウェブデザインでコーディングしたサイトで、PC表示の時はクリックイベントを使用したくない、スマホ表示の時はクリックイベントで隠れた要素を表示したい時などでpointer-eventsプロパティが役に立ちます。

マウスホバーなどで要素をクリッカブルにしたい場合に、pointer-events:auto;を指定すれば要素をクリッカブルにできます。