備忘録的プログラミングリファレンス

pointer-events プロパティ

 pointer-events プロパティは、ポインターのイベントに反応するか/否かの指定と、 <svg> の操作を可能にするプロパティです。
 ポインターのイベントとはクリックイベントとも呼ばれ、pointer-events プロパティを 'none' に指定するとクリックイベントは無効化され、クリックやホーバーに反応しません。
 ただし、バブリング機能は無効化できないために、JavaScript を利用したイベントハンドラーがあると反応することがあります。

ポインターイベントが反応しないように(Exampleを参照
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 AnimationNo

Example

 pointer-eventsの例です。none値でクリックに反応していないように見せることができます。
 以下の例では、リンクがあるテキスト上でポインターをホーバーすると通常はリンク用に変わりますが、通常のポインターのままになります。

バブリングを利用した pointer-events の使い方

 以下の例は、親エレメントはポインターイベントに反応しませんが、子エレメントであるボタンのポインターイベントには反応します。
 バブリング機能によって子エレメントで起きたクリックイベントが親エレメントで発生します。