CSS pointer-eventsプロパティ：ポインターイベントの制御子

`pointer-events`プロパティ

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

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

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

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

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

形式構文

形式定義

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>要素をクリックに対するポインターイベントの対象から除外してみます。

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

注意点

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>

.childにはpointer-events: noneが適用されているため、この要素の上にマウスを乗せてもカーソルの形状はpointerに変わりません。この要素はマウスイベントを受け取らないため、カーソルを乗せても反応しません。
.parentは、.childの視覚的なレイヤーで下に位置しているため、マウスイベントを代わりに受け取ります。その結果、.parentのcursor: not-allowedが適用され、not-allowedのカーソルが表示されます。