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

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

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

構文

/* キーワード値 */
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
要素がマウスイベントの target になることはありません。しかし、子孫要素が pointer-events の別の値をセットされていた場合は、その子孫要素自体はマウスイベントのターゲットとなりえます。その場合、マウスイベントはイベントキャプチャ/バブリングの過程で必要に応じて親要素のイベントリスナーをトリガーします。

SVG のみ

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

形式文法

auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

基本的な例

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

img {
  pointer-events: none;
}

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

<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;
}

メモ

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

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

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

仕様書

仕様書 状態 備考
Scalable Vector Graphics (SVG) 2
pointer-events の定義
勧告候補
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
pointer-events の定義
勧告 初回定義

初期値auto
適用対象すべての要素
継承あり
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

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

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1.5IE 完全対応 11Opera 完全対応 9Safari 完全対応 3WebView Android 完全対応 2Chrome Android ? Edge Mobile 完全対応 ありFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Applies to HTML elements
実験的
Chrome 完全対応 2Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 11Opera 完全対応 15Safari 完全対応 4WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報

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

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