pointer-events
pointer-events は CSS のプロパティで、特定のグラフィック要素がポインターイベントの対象になる可能性のある環境（存在する場合）を設定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1.5 | 4 | 18 | 3.2 | |
html elements HTML要素に適用されます | 2 | 12 | 3.6 | 4 | 18 | 3.2 |
基本構文
CSS
/* Make decorative overlay transparent on click */
.decorative-overlay {
pointer-events: none;
}
/* Disabled button */
.button:disabled {
pointer-events: none;
opacity: 0.5;
}ライブデモ
実務での使いどころ
-
装飾レイヤー
グラデーションや影などの装飾オーバーレイを、クリックイベントを妨げずに重ねることができる。
-
UI無効化
操作不可の状態を視覚的にもインタラクション的にも表現する。
注意点
- pointer-events: none はキーボード操作には影響しない。Tab キーでフォーカス可能な場合があるため、tabindex="-1" も併用する。
アクセシビリティ
- pointer-events: none だけでは完全に操作を無効化できない。aria-disabled="true" やtabindex="-1" も適切に設定する。