Widely available 全主要ブラウザで対応済み。安心して使用できる。
インタラクション Widely available

pointer-events

pointer-events: none を指定すると、要素がクリックやホバーのイベントを受け取らなくなり、背面の要素にイベントが透過する。オーバーレイ装飾や無効化されたUI要素の実装に便利。SVG要素に対しても細かな制御が可能。

インタラクションイベント

概要

pointer-events: none を指定すると、要素がクリックやホバーのイベントを受け取らなくなり、背面の要素にイベントが透過する。オーバーレイ装飾や無効化されたUI要素の実装に便利。SVG要素に対しても細かな制御が可能。

対応ブラウザ

デスクトップ

Chrome 2+
Edge 12+
Safari 4+
Firefox 3.6+

モバイル

Chrome Android 18+
Safari iOS 3.2+
Firefox Android 4+

基本構文

CSS 
/* 装飾オーバーレイをクリックで透過 */
.decorative-overlay {
  pointer-events: none;
}

/* 無効状態のボタン */
.button:disabled {
  pointer-events: none;
  opacity: 0.5;
}

実務での使いどころ

  • 装飾レイヤー

    グラデーションや影などの装飾オーバーレイを、クリックイベントを妨げずに重ねることができる。

  • UI無効化

    操作不可の状態を視覚的にもインタラクション的にも表現する。

注意点

  • pointer-events: none はキーボード操作には影響しない。Tab キーでフォーカス可能な場合があるため、tabindex="-1" も併用する。

アクセシビリティ

  • pointer-events: none だけでは完全に操作を無効化できない。aria-disabled="true" やtabindex="-1" も適切に設定する。

参考リンク