pointer-events

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

試してみましょう

構文

css
/* キーワード値 */
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) の上にマウスカーソルがある場合にのみ要素がポインターイベントのターゲットになりえます。 fillstrokevisibility の値でイベント処理が変化することはありません。

解説

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

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

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

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

公式定義

初期値auto
適用対象すべての要素
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

pointer-events = 
auto |
bounding-box |
visiblePainted |
visibleFill |
visibleStroke |
visible |
painted |
fill |
stroke |
all |
none

基本的な例

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

css
img {
  pointer-events: none;
}

リンクの無効化

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

HTML

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

CSS

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

関連情報