ブログに書き溜めたいようなことがないのか、そんなことをするヒマがないのか・・。
さて、またもちょっとしたメモ。
pointer-events
おさえるべきポイント
設定できる値は以下。
- auto
- none
- visiblePainted
- visibleFill
- visibleStroke
- visible
- painted
- fill
- stroke
- all
- inherit
ただ使う場合は、そのターゲットがSVGかそうでないかがポイント。
SVGじゃない場合は、
- auto
- none
- inherit
しか効きません。
pointer-events: none;
SVGなんてさわることないので、主に使うのはコレだけ。
コレを設定すると、いわゆるマウス(タッチ)イベントが発火しなくなる。
- 特定の要素をタップできなくするとか
- テキストを選択できないようにするとか
- 画像をドラッグできないようにするとか
逆に、
本来はクリック・タップできてしまうものを、ないように扱うこともできる・・と。
つまりはセレクトボックスをゴテゴテに修飾したいとき、before/afterで作った要素を重ねまくっても、セレクトボックスへのクリック・タップを生かすことができる、っていうのを知りました。
いやー、これは久々に役に立った！