pointer-events

概要

CSSプロパティ pointer-events を使うことで、ある可視要素がどのような場合にマウスイベントの target となりうるかを制御することができます。このプロパティを指定しない場合、SVGコンテンツに対する visiblePainted と同様の特性が適用されます。

none を指定した場合、その要素がマウスイベントのターゲットにならないだけでなく、マウスイベントはその要素の下にあるものへと「通過」します。

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

構文

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

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

 

例 1

/* Example 1: すべてのimg要素に、drag、hover、click等のいかなるマウスイベントも反応させないようにする。 */

img { pointer-events: none; }

 

例 2

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 をセットされていた場合、その子要素をターゲットにするどのようなイベントも親要素を通過し、その際に親要素に設定されたイベントリスナーをトリガーします。もちろん、これらの子要素に触れず親要素にだけ触れるマウスの動きは、子要素と親要素のどちらにも捕まえられることはありません(親要素を「通過」し、その下にあるものがターゲットになります)。

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

仕様

仕様書 策定状況 コメント
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
pointer-events の定義
勧告  

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

ブラウザ実装状況

機能 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
SVG support 1.0 (有) 1.5 (1.8) 11.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)
機能 Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 2.1 (有) 3.6 11 33 3.2

関連情報

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

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