Debriefing [デブリーフィング]

Debriefing [デブリーフィング] はHTMLやCSSやデザインなどのWeb制作に関することや、仕事を効率化する方法や生活に役立つHow Toを発信します。

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

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

画像出典:W3C

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

今回はpointer-eventsプロパティの使い方や特徴について紹介します。

 

目次

pointer-events: none;

.a {
  pointer-events: none;
}

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

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

pointer-eventsプロパティについて

pointer-eventsはマウスイベントの対象を制御できるプロパティです。値は「auto」と「none」の2つを指定することができ、初期値は「auto」が指定されます。その他SVG要素のみの場合に、さらにコアな値を指定できるようです。

MDN pointer-events

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

対応ブラウザ

対応ブラウザ

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

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

使いどころ

レスポンシブサイトで

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

逆にマウスホバーでクリッカブルにしたい時に

マウスホバーで要素をクリッカブルにしたい場合に、該当の要素にnoneではなく、pointer-events:auto;

を指定すれば要素をクリッカブルにすることができます。

 

© Debriefing 2019 All Rights Reserved.