pointer-events

by 1 contributor:

This translation is incomplete. Please help translate this article from English.

概要

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

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

 

Syntax

pointer-events:  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要素の上にマウスカーソルがいる場合にのみ要素がマウスイベントのターゲットになりえます。fillstrokeプロパティの値はイベントプロセスに影響を与えません。
painted
SVGの場合のみの値です。fillプロパティがnone以外にセットされている塗りの(すなわちfill)要素、もしくはstrokeのプロパティがnone以外にセットされている線の(すなわちstroke)要素の上にマウスカーソルがいる場合にのみ要素がマウスイベントのターゲットになりえます。visibilityプロパティの値はイベントプロセスに影響を与えません。
fill
SVGの場合のみの値です。塗りの(すなわちfill)要素の上にマウスカーソルがいる場合にのみ要素がマウスイベントのターゲットになりえます。fillvisibilityプロパティの値はイベントプロセスに影響を与えません。
stroke
SVGの場合のみの値です。線の(すなわちstroke)要素の上にマウスカーソルがいる場合にのみ要素がマウスイベントのターゲットになりえます。strokevisibilityの値はイベントプロセスに影響を与えません。
all
SVGの場合のみの値です。塗りの(すなわちfill)要素と線の(すなわちstroke)要素の上にマウスカーソルがいる場合にのみ要素がマウスイベントのターゲットになりえます。fillstrokevisibilityの値はイベントプロセスに影響を与えません。

 

Examples

Example 1

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

img { pointer-events: none; }

 

Example 2

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

<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>
a[href="http://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

Specification Status Comment
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'pointer-events' in that specification.
勧告  

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

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
SVG support 1.0 1.5 (1.8) 9.0 9.0 (2.0) 3.0 (522)
HTML/XML content 2.0 3.6 (1.9.2) 11.0 15.0 4.0 (530)
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

See also

ドキュメントのタグと貢献者

Contributors to this page: ariyo13
最終更新者: ariyo13,