pointer-eventsについてのメモ

ブログに書き溜めたいようなことがないのか、そんなことをするヒマがないのか・・。
さて、またもちょっとしたメモ。

pointer-events

参考：pointer-events - CSS | MDN

おさえるべきポイント

設定できる値は以下。

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

ただ使う場合は、そのターゲットがSVGかそうでないかがポイント。

SVGじゃない場合は、

• auto
• none
• inherit

しか効きません。

pointer-events: none;

SVGなんてさわることないので、主に使うのはコレだけ。

コレを設定すると、いわゆるマウス(タッチ)イベントが発火しなくなる。

• 特定の要素をタップできなくするとか
• テキストを選択できないようにするとか
• 画像をドラッグできないようにするとか

逆に、

本来はクリック・タップできてしまうものを、ないように扱うこともできる・・と。

つまりはセレクトボックスをゴテゴテに修飾したいとき、before/afterで作った要素を重ねまくっても、セレクトボックスへのクリック・タップを生かすことができる、っていうのを知りました。

いやー、これは久々に役に立った！