[css: pointer-events] Pointer Event ( :hover, onClick ... ) handlering CSS. #css #js #react

pointer-events.md

ざっくり、「クリック / ホバーのイベントが発生する／しない要素である」を CSS で定義できるプロパティ。

React なんかで onClick をつけた button の子要素に div とか重ねる場合、子要素のクリックイベントが発生して親要素の onClick がうまく動作しない事がある。

return (
  <button
    type="button"
    onClick={handleClick}
  >
    親:ボタン要素
    <div>
      子:上に重ねる子要素、こいつをクリックしたときボタン側の onClick うまく動かん
    </div>
  </button>
);

↑ ケースでは子要素側に pointer-events: none; をセットすることで、子要素側のクリックイベント ( pionter-event の 1 つ ) をキャンセルして、直で親要素の onClick が動作するようになる。