pointer-events プロパティ
pointer-events プロパティは、ポインターのイベントに反応するか／否かの指定と、 <svg> の操作を可能にするプロパティです。
ポインターのイベントとはクリックイベントとも呼ばれ、pointer-events プロパティを 'none' に指定するとクリックイベントは無効化され、クリックやホーバーに反応しません。
ただし、バブリング機能は無効化できないために、JavaScript を利用したイベントハンドラーがあると反応することがあります。
pointer-events: none;
例えば、リンクがあるテキスト上でポインターをホーバーするとリンクとしての色に変わりますが、pointer-events: none;にするとリンクとして反応しません。
以下の使い方と注意点があります。
- イベントのバブリングを利用して、クリックイベントから親エレメントや兄弟エレメントのスタイルを変更することができる。
- 画像や動画、音楽をダウンロードさせないために、クリックイベントを無効化したように見せる。キーボードイベントやバブリング機能でダウンロードできるので注意。JavaScript によるイベントで無効化の必要がある。
- JavaScriptでクリックイベントを無効化する前に、 pointer-events を設定すると JavaScript による設定を忘れがちになる。
- <svg> 画像の反応する範囲を指定。
ページ内 Index
構文(Syntax)
CSS
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | initial | inherit;
DOM ( JavaScript )
String = object.style.pointerEvents;
object.style.pointerEvents="auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | initial | inherit";
値（Values）
| Value | 摘要 |
|---|---|
| auto | 初期値（default値） |
| none | ポインターのイベントを無効に |
| all | <svg>。描画範囲全体 |
| fill | <svg>。塗りつぶした部分 |
| painted | <svg>。fill:none; と stroke:none; に指定した以外の部分 |
| stroke | <svg>。線に反映 |
| visible | <svg>。visibility:visible; の時、描画範囲全体 |
| visibleFill | <svg>。visibility:visible; の時、塗りつぶした部分 |
| visiblePainted | <svg>。visibility:visible; の時、fill:none; と stroke:none; に指定した以外の部分 |
| visibleStroke | <svg>。visibility:visible; の時、線に反映 |
| initial | 初期値に戻す |
| inherit | 親エレメントのプロパティを継承 |
備考（Remarks）
| 初期値（Default value） | auto |
| 継承（Inherited） | Yes |
| CSS Animation | No |
Example
pointer-eventsの例です。none値でクリックに反応していないように見せることができます。
以下の例では、リンクがあるテキスト上でポインターをホーバーすると通常はリンク用に変わりますが、通常のポインターのままになります。
バブリングを利用した pointer-events の使い方
以下の例は、親エレメントはポインターイベントに反応しませんが、子エレメントであるボタンのポインターイベントには反応します。
バブリング機能によって子エレメントで起きたクリックイベントが親エレメントで発生します。