CSSで要素に対するクリックを無効化する(pointer-events)

CSSでやるの違和感あるけど、便利。

button {
  pointer-events: none;
}

とするとボタンに対するクリックが効かなくなる。ボタンならdiasbled=falseにする方が綺麗だと思いますが、なかなか手の届かないところにあるコンポーネントを指定したいときとか、CSSだとシュッといけます(?)。

• https://developer.mozilla.org/ja/docs/Web/CSS/pointer-events
• https://github.com/akiran/react-slick/issues/1186

SVGが相手だとstorokeとかfillとか指定できてすごい。当たり判定とかもう自前で書く時代じゃないのだ。