Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

pointer-events

この翻訳は不完全です。英語から この記事を翻訳 してください。

概要

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

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

初期値auto
適用対象全要素
継承継承する
メディアvisual
計算値指定値
アニメーションの可否不可
正規順序形式文法で定義される一意のあいまいでない順序

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要素の上にマウスカーソルがいる場合にのみ要素がマウスイベントのターゲットになりえます。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: 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

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

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

 このページの貢献者: Sebastianz, ariyo13
 最終更新者: Sebastianz,