🧊

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で作った要素を重ねまくっても、セレクトボックスへのクリック・タップを生かすことができる、っていうのを知りました。

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