pointer-events

概要

CSSプロパティ pointer-events は、マウスイベントの対象となりうる特定の可視要素への編集者のコントロールを可能にします。このプロパティを指定しない場合、同様な特性値である visiblePainted の値がSVGコンテンツに適用されます。

値noneは、要素がマウスイベントのターゲットにならないことを明示することに加え、その代わりにマウスイベントが通過する要素やその配下にあるどんなターゲット要素へも指示はしません。

Syntax

auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

Values

auto

要素は、pointer-eventsプロパティが指定されていないときと同様にふるまいます。SVGコンテンツ内ではvisiblePaintedを指定したときと同じ効果になります。

none

要素は、マウスイベントのターゲットになることはありません。しかし、子孫要素がpointer-eventsの別の値をセットされていた場合は、その子孫要素自体はマウスイベントのターゲットとなりえます。その場合、マウスイベントはそのイベント キャプチャ/バブル フェーズの過程で必要に応じて親要素のイベントリスナーをトリガーします。

visiblePainted

SVGの場合のみの値です。要素の visibility プロパティにvisibleがセットされていて、fillプロパティにnone以外の値がセットされている塗りの（すなわちfill）要素の上、もしくはstrokeプロパティがnone以外の線の（すなわちstroke）要素の上にマウスカーソルがある場合のみ、要素がマウスイベントのターゲットになりえます。visibilityプロパティの値はイベントプロセスに影響を与えません。

visibleFill

SVGの場合のみの値です。visibilityプロパティがvisibleにセットされていて、塗りの（すなわちfill）要素の上にマウスカーソルがいる場合にのみ要素がマウスイベントのターゲットになりえます。fillプロパティの値はイベントプロセスに影響を与えません。

visibleStroke

SVGの場合のみの値です。visibilityプロパティがvisibleにセットされていて、線の（すなわちstroke）要素の上にマウスカーソルがいる場合にのみ要素がマウスイベントのターゲットになりえます。strokeプロパティの値はイベントプロセスに影響を与えません。

visible

SVGの場合のみの値です。visibilityプロパティがvisibleにセットされていて、塗りの（すなわちfill）要素か線の（すなわちstroke）要素の上にマウスカーソルがいる場合にのみ要素がマウスイベントのターゲットになりえます。fillとstrokeプロパティの値はイベントプロセスに影響を与えません。

painted

SVGの場合のみの値です。fillプロパティがnone以外にセットされている塗りの（すなわちfill）要素、もしくはstrokeのプロパティがnone以外にセットされている線の（すなわちstroke）要素の上にマウスカーソルがいる場合にのみ要素がマウスイベントのターゲットになりえます。visibilityプロパティの値はイベントプロセスに影響を与えません。

fill

SVGの場合のみの値です。塗りの（すなわちfill）要素の上にマウスカーソルがいる場合にのみ要素がマウスイベントのターゲットになりえます。fillとvisibilityプロパティの値はイベントプロセスに影響を与えません。

stroke

SVGの場合のみの値です。線の（すなわちstroke）要素の上にマウスカーソルがいる場合にのみ要素がマウスイベントのターゲットになりえます。strokeとvisibilityの値はイベントプロセスに影響を与えません。

all

SVGの場合のみの値です。塗りの（すなわちfill）要素と線の（すなわちstroke）要素の上にマウスカーソルがいる場合にのみ要素がマウスイベントのターゲットになりえます。fillとstrokeとvisibilityの値はイベントプロセスに影響を与えません。

Examples

Example 1

/* Example 1: すべてのimg要素に、drag、hover、click等のいかなるマウスイベントも反応させないようにする。 */

img { pointer-events: none; }

Example 2

Example 2: https://example.com non-reactive. へのリンクを反応させないようにする。

<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="https://example.com">example.com</a></li>
</ul>

a[href="https://example.com"] {
  pointer-events: none;
}

Notes

なお、pointer-eventsを使用して要素がマウスイベントのターゲットとなることを防止するということは、必ずしもその要素のイベントリスナーがトリガーされない、することができないという意味ではありません。仮に要素の小要素のひとつがマウスイベントのターゲットになるよう明示的にpointer-eventsをセットされていた場合、その子要素をターゲットにするどのようなイベントも親要素を通過するようになり、つながった親に沿って移動するように必要に応じてイベントリスナーをトリガーします。もちろん、スクリーンの子要素ではなく親要素に覆われている点におけるすべてのマウスの行動は、子要素や親要素によって捕まえられるわけではありません（親要素を「通過」し、その下はどんなものであれターゲットになります）。

私たちはマウスイベントを「捕まえる」可能性のある要素をもつHTMLに、より粒度の細かいコントロール（autoとnoneだけではなく）を提供したいと思っています。よりHTML向けにpointer-eventsをどのように拡張すべきかの私たちの決定づけのため、このプロパティで可能にしたい何か決まったものをあなたがもっているのであれば、このwikiページのUse Casesセクションに記入してください（ページを奇麗に維持しなければという気遣いはいりません）。

このプロパティは、スクロール中によりよいフレームレートを記録することもできます。実際に、スクロール中、いくつかの要素にマウスをhoverすると、hover効果が適用されます。しかしながら、それらの効果はユーザーに認識されることはなくほとんどはスクロールによる無駄な結果です。bodyへのpointer-events: noneの適用によってhoverを含むマウスイベントを無効にすることで、よりよいスクロールパフォーマンス結果が得られます。

Specifications

これはHTML要素に対する拡張であり、CSS基本ユーザーインターフェイスモジュールのレベル３の草稿に存在していたが、現在レベル４に組み込まれています。

Browser compatibility

See also

• The SVG attribute pointer-events
• WebKit Specs PointerEventsProperty extended for use in (X)HTML content
• 60fps scrolling using pointer-events: none