pointer-eventsプロパティ

pointer-eventsプロパティは、要素がクリックやホバー、ドラッグなどのポインターイベントに対してどのように反応するかを制御するCSSプロパティです。このプロパティは、要素がポインターイベントの対象になり得るかどうかを指定します。

ポインターイベントの概念について

マウスやタッチ、ペンなどのポインティングデバイスを通じて発生する（イベントが発生するといいます）ユーザーのインタラクションを指します。このようなポインターイベントは、ユーザーがウェブページやアプリケーションとやり取りする際に発生し、クリックやホバー、ドラッグなどさまざまな動作があります。ポインターイベントはユーザーインターフェースの動作やインタラクションを制御し、ユーザーエクスペリエンスの向上に重要な役割を果たします。

例えば、マウスで要素をクリックすると、クリックという動作に対するポインターイベントが発生します。モバイルで要素にタッチすると、タッチする動作に対するポインターイベントが発生します。マウスで要素をホバーしたりドラッグしたりする場合も同様にポインターイベントが発生します。

pointer-eventsプロパティは、このようなポインターイベントの対象になり得るかどうかを指定します。

形式構文

CSS 
selector {
    pointer-events: auto | none;
}

形式定義

pointer-eventsプロパティの形式定義
初期値 auto
適用される要素 すべての要素
継承 はい
アニメーション いいえ

CSSプロパティの値

pointer-eventsプロパティの値
auto 初期値は、要素が通常どおり動作し、既存のプロパティに従ってポインターイベントに応答することです（例：クリック可能な要素はクリックでき、テキストは選択可能です）。
none 該当する要素はポインターイベントの対象にはなりません。しかし、この要素の子要素の中にpointer-eventsプロパティが異なる値に設定されている要素がある場合、ポインターイベントはその子要素を対象にすることができます。このような場合、ポインターイベントは親要素のイベントキャプチャ／バブル段階において、該当する子要素を通過する際に適切なイベントリスナーを有効化することが可能です。

構文

CSS 
/* キーワード値 */
pointer-events: none;
pointer-events: auto;

/* グローバル値 */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
pointer-events: revert;
pointer-events: revert-layer;

例題

サンプルを通してpointer-eventsの値について見ていきます。次に、pointer-events: none;を使って<a>要素をクリックに対するポインターイベントの対象から除外してみます。

HTML 
<a href="https://www.rakuten.co.jp/">クリックして楽天へ移動</a>
CSS 
a {
    pointer-events: none;
}

pointer-events: none;を指定して<a>要素をクリックに対するポインターイベントの対象から除外すると、<a>要素はクリックが適用されなくなります。

実際の適用例 pointer-events: none;が適用された状態です。クリックしてみてください！クリックは反応しません。

注意点

pointer-eventsプロパティを使用する際には、必ず考慮すべき2つのポイントがあります。

アクセシビリティの考慮

pointer-eventsプロパティを使用する際は、アクセシビリティの問題を考慮する必要があります。pointer-events: none;を指定すると、該当要素にポインターイベントが伝達されなくなるため、マウスやタッチによるクリック操作ができなくなります。その結果、視覚障害者や手に不自由があるユーザーが該当要素を操作できなくなる可能性があります。アクセシビリティのガイドラインを遵守し、ポインターイベントの制御を適切に行うことが重要です。

pointer-events: noneが指定されている場合、cursorプロパティは動作しません。

cursorプロパティは、マウスポインターが要素の上にあるときに表示されるカーソルの形状を指定します。

該当する要素にpointer-events: noneが指定されている場合、その要素はポインターイベントの対象になりません。cursorプロパティを指定しても、cursorは動作しません。

つまり、マウスカーソルは該当要素を無視し、視覚的なレイヤーで下にある要素のcursorプロパティによってカーソルの形状が決まります。

「下に位置する要素」とは、DOM構造上の親要素ではなく、視覚的なレイヤーで該当要素の下に重なっている要素を指します。

次の例を使って説明します。

HTML 
<div class="parent" style="cursor: not-allowed;">
  <div class="child" style="pointer-events: none; cursor: pointer;">
    クリックできない領域
  </div>
</div>
実際の適用例 マウスカーソルを合わせてみてください！not-allowedのカーソルが表示されます。
  • .childにはpointer-events: noneが適用されているため、この要素の上にマウスを乗せてもカーソルの形状はpointerに変わりません。この要素はマウスイベントを受け取らないため、カーソルを乗せても反応しません。
  • .parentは、.childの視覚的なレイヤーで下に位置しているため、マウスイベントを代わりに受け取ります。その結果、.parentのcursor: not-allowedが適用され、not-allowedのカーソルが表示されます。

ブラウザ互換性

pointer-eventsプロパティの対応ブラウザー
プロパティ
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
pointer-events 2.0 12.0 3.6 4.0

caniuse.comで詳しい情報をご確認ください。

仕様書

pointer-events 속성에 대한 명세서
仕様書
pointer-events CSS Basic User Interface Module Level 4
#pointer-events-control

参考資料