| 適用できる要素 | 全て |
|---|---|
| 継承 | する |
| 初期値 | auto |
CSSのpointer-eventsプロパティはポインターイベントの発生の対象を制御するプロパティです。
HTMLの全ての要素で設定可能なプロパティですが、全ての要素を対象にした設定と、SVGコンテンツを対象にした設定の2通りに別れます。
pointer-eventsプロパティではキーワード値のみを設定出来ます。そのキーワード値は
pointer-eventsプロパティは初期値のautoとnoneのみ設定可能です。
SVGコンテンツを対象とした場合はpointer-eventsプロパティは下記のキーワード値を設定することが出来ます。
それぞれポインターイベントの対象になるマウルカーソルの条件を表しています。
| キーワード | 意味 |
|---|---|
| visible | visibilityプロパティがvisibleの場合で、線か塗りつぶしの上にある場合 |
| visibleFill | visibilityプロパティがvisibleの場合で、塗りつぶしの上にある場合 |
| visibleStroke | visibilityプロパティがvisibleの場合で、線の上にある場合 |
| fill | 塗りつぶしの上にある場合 |
| stroke | 線の上にある場合 |
| painted | filleがnoneまたはstrokeがnone以外の要素の上にある場合 |
| all | 線か塗りつぶしの上にある場合 |
/* 構文(全ての要素） */
pointer-events: auto | none;
/* 構文（SVGコンテンツ） */
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit;pointer-eventsプロパティをnoneに設定して、a要素のポインターイベントを無効にしてみましょう。
上記のサンプルコードのプレビューの「リンク」をクリックしても、遷移しないと思います。これはpointer-eventsプロパティのnoneの設定による効果です。
このようにpointer-evetsプロパティでリンクをクリック禁止にする方法は一般的によくある方法で、慣習的にvoid(0)が利用されることもあります。
CSSのpointer-eventsプロパティはモダンなブラウザのほぼ全てで対応しているプロパティです。SVGに対応しているブラウザではほぼ対応しています。しかし一部IEの古いバージョンなど非対応のブラウザがありますので、注意しましょう。
pointer-eventsプロパティの各ブラウザの対応状況は下記よりご確認頂けます。
IEではpointer-events: noneを設定しているはずなのに、効かない場合があります。下記でその対処法を解説しています。
