pointer-events
試してみましょう
構文
/* キーワード値 */
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: revert;
pointer-events: revert-layer;
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 キーを使用したキーボードナビゲーションによってフォーカスを受け取ります。
公式定義
初期値 | auto |
---|---|
適用対象 | すべての要素 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 離散値 |
形式文法
例
基本的な例
この例では、すべての画像のポインターイベント (クリック、ドラッグ、ホバー等) を無効にします。
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;
}
結果
仕様書
Specification |
---|
CSS Basic User Interface Module Level 4 # pointer-events-control |
Scalable Vector Graphics (SVG) 2 # PointerEventsProperty |
ブラウザーの互換性
BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
関連情報
- SVG 属性
pointer-events
- SVG 属性
visibility
- (X)HTML で使うことを踏まえた WebKit の PointerEventsProperty の仕様書
user-select
- ユーザーがテキストを選択できるかどうかの制御