From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/pointer-events/index.html | 164 +++++++++++++++++++++++++++++ 1 file changed, 164 insertions(+) create mode 100644 files/ja/web/css/pointer-events/index.html (limited to 'files/ja/web/css/pointer-events/index.html') diff --git a/files/ja/web/css/pointer-events/index.html b/files/ja/web/css/pointer-events/index.html new file mode 100644 index 0000000000..805d07dd34 --- /dev/null +++ b/files/ja/web/css/pointer-events/index.html @@ -0,0 +1,164 @@ +--- +title: pointer-events +slug: Web/CSS/pointer-events +tags: + - CSS + - CSS Property + - CSS プロパティ + - Reference + - SVG + - pointer-events + - 'recipe:css-property' +translation_of: Web/CSS/pointer-events +--- +
{{CSSRef}}
+ +

pointer-events は CSS のプロパティで、特定のグラフィック要素がポインターイベントの対象になる可能性のある環境 (存在する場合) を設定します。

+ +
{{EmbedInteractiveExample("pages/css/pointer-events.html")}}
+ + + +

構文

+ +
/* キーワード値 */
+pointer-events: auto;
+pointer-events: none;
+pointer-events: visiblePainted; /* SVG のみ */
+pointer-events: visibleFill;    /* SVG のみ */
+pointer-events: visibleStroke;  /* SVG のみ */
+pointer-events: visible;        /* SVG のみ */
+pointer-events: painted;        /* SVG のみ */
+pointer-events: fill;           /* SVG のみ */
+pointer-events: stroke;         /* SVG のみ */
+pointer-events: all;            /* SVG のみ */
+
+/* グローバル値 */
+pointer-events: inherit;
+pointer-events: initial;
+pointer-events: unset;
+
+ +

pointer-events プロパティは、以下の値の一覧から選択した単一のキーワードとして指定します。

+ +

値

+ +
+
auto
+
要素は、 pointer-events プロパティが指定されていないときと同様にふるまいます。SVGコンテンツ内では visiblePainted を指定したときと同じ効果になります。
+
none
+
要素がポインターイベントの対象になることはありません。しかし、子孫要素が pointer-events の別の値をセットされていた場合は、その子孫要素自体はポインターイベントのターゲットとなりえます。その場合、ポインターイベントはイベントキャプチャ/バブリングの過程で必要に応じて親要素のイベントリスナーをトリガーします。
+
+ +

SVG のみ(HTML では実験的)

+ +
+
visiblePainted
+
SVG の場合のみ (HTML では実験的) の値です。要素の visibility プロパティに visible が設定されていて、かつ、例えば fill プロパティに none 以外の値が設定されている時の塗り (fill)、もしくは stroke プロパティが none 以外の時の線 (stroke) の上にマウスカーソルがある場合のみ、要素がポインターイベントのターゲットになりえます。
+
visibleFill
+
SVG の場合のみの値です。 visibility プロパティが visible にセットされていて、塗り (fill) の上にマウスカーソルがある場合にのみ、要素がポインターイベントのターゲットになりえます。 fill プロパティの値でイベント処理が変化することはありません。
+
visibleStroke
+
SVG の場合のみの値です。 visibility プロパティが visible にセットされていて、線 (stroke) の上にマウスカーソルがある場合にのみ、要素がポインターイベントのターゲットになりえます。 stroke プロパティの値でイベント処理が変化することはありません。
+
visible
+
SVG の場合のみ (HTML では実験的) の値です。 visibility プロパティが visible にセットされていて、塗り (fill) か線 (stroke) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 fill プロパティや stroke プロパティの値でイベント処理が変化することはありません。
+
painted
+
SVG の場合のみ (HTML では実験的) の値です。 fill プロパティが none 以外にセットされている塗りの（すなわち fill ）要素、もしくは stroke のプロパティが none 以外にセットされている線の（すなわち stroke ）要素の上にマウスカーソルがいる場合にのみ要素がポインターイベントのターゲットになりえます。 visibility プロパティの値はイベントプロセスに影響を与えません。
+
fill
+
SVGの場合のみの値です。塗り (fill) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 fill プロパティや visibility プロパティの値でイベント処理が変化することはありません。
+
stroke
+
SVGの場合のみの値です。線 (stroke) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 stroke プロパティや visibility の値でイベント処理が変化することはありません。
+
all
+
SVG の場合のみ (HTML では実験的) の値です。塗り (fill) と線 (stroke) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 fill や stroke や visibility の値でイベント処理が変化することはありません。
+
+ +

解説

+ +

このプロパティが指定されないと、 visiblePainted の値の同じ性質が SVG コンテンツに適用されます。

+ +

値を none に設定すると、要素がポインターイベントのターゲットではないことを示すのに加え、ポインターイベントが要素を「通過」して、代わりに要素の「下」をターゲットにすることを指示します。

+ +

pointer-events を使用して要素がポインターイベントのターゲットとなることを防止するということは、必ずしもその要素のイベントリスナーが起動されない、することができないという意味ではありません。仮に要素の子要素のひとつで、 pointer-events がポインターイベントのターゲットになるよう明示的に設定されていた場合、その子要素をターゲットにするどのようなイベントも親要素を通過し、その際に親要素に設定されたイベントリスナーを起動します。もちろん、これらの子要素に触れず親要素にだけ触れるマウスの動きは、子要素と親要素のどちらにも捕まえられることはありません (親要素を「通過」し、その下にあるものがターゲットになります)。

+ +

pointer-events: none を持った要素は、 Tab キーを使用したキーボードナビゲーションによってフォーカスを受け取ります。

+ +

私たちは HTML で、どのような要素が、どんな時に、ポインターイベントを「捕まえる」かを (auto と none だけではなく) より細かく制御できるようにしたいと思っています。今後の HTML で pointer-events をどのように拡張すべきかを決めるうえで、このプロパティで実現したい具体例があれば、この wiki ページの Use Cases セクションに記入してください (きれいに整理してからなどと気にしなくても大丈夫です)。

+ +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +
{{csssyntax}}
+ +

例

+ +

基本的な例

+ +

この例では、すべての画像のポインターイベント (クリック、ドラッグ、ホバー等) を無効にします。

+ +
img {
+  pointer-events: none;
+}
+ + + +

この例では、 http://example.com へのリンクのポインターイベントを無効にします。

+ +

HTML

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

CSS

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

結果

+ +
{{EmbedLiveSample("Disabling_links", "500", "100")}}
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG2')}}
{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG1.1')}}初回定義
+ +

このプロパティは HTML 要素に対する拡張であり、 CSS Basic User Interface Module Level 3 の草稿に記述がありますが、現在では同標準の Level 4 に組み込まれています。

+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.pointer-events")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf