Pointer Events API
1. Pointer Events API とは
Pointer Events API は、マウス、ペン/スタイラス、タッチ（指）といった様々なポインティングデバイスを扱うための「統一入力モデル」を提供する最新のWeb標準です。
これまではマウス用のイベントモデルとタッチ用のイベントモデルを個別に実装する必要がありましたが、このAPIによってハードウェアに依存しない単一のシステムへと統合され、開発が大幅に簡素化されました。モダンなWeb開発において、あらゆるユーザーに一貫したエクスペリエンスを提供するために、Pointer Events API の使用が推奨されています。
2. イベントタイプ (Event Types)
ポインターイベントの名前はマウスイベントと非常によく似ています。基本的には「mouse」を「pointer」に置き換えるだけです。
- pointerdown ポインターがアクティブになったとき（ボタンが押された、または物理的な接触があったとき）に発火します。
- pointerup ポインターがアクティブでなくなったとき（ボタンが離された、または接触が終了したとき）に発火します。
- pointermove ポインターの座標が変化したときに発火します。
- pointerover ポインターが要素の境界内に入ったときに発火します。
- pointerout ポインターが要素の境界から外に出たときに発火します。
- pointerenter pointeroverと似ていますが、DOM階層をバブリング（遡及）しません。
- pointerleave pointeroutと似ていますが、バブリングしません。
- pointercancel システムがポインターの操作をキャンセルしたときに発火します（OSがシステムメニューを開くなど、操作が中断された場合）。
3. イベントプロパティ (Event Properties)
PointerEvent インターフェースは MouseEvent のプロパティを継承し、さらにポインター独自のプロパティを追加しています。
- pointerId 各ポインターに割り当てられる一意のID。マルチタッチのシナリオで特定の指を追跡する際に役立ちます。
- pointerType デバイスのタイプを示す文字列（"mouse"、"pen"、または "touch"）。
- isPrimary そのポインターが「プライマリ（主）」であるかどうかを示す真偽値（マルチタッチにおける1番目の指など）。
- pressure ポインターにかかっている圧力を示す 0 から 1 までの正規化された値。
4. Pointer Events API のメリット
- 統一モデル: 単一のイベントリスナーを書くだけで、複数の入力タイプに対応できます。これにより、コードの重複を減らし、複雑さを解消できます。
- 拡張された属性: 座標などの標準的なマウスプロパティに加え、圧力（pressure）、傾き（tiltX, tiltY）、幅（width）、高さ（height）といった、ペンやタッチ入力に特有の新しいプロパティを取得できます。
- ポインターキャプチャ:
setPointerCapture()メソッドを使用すると、ポインターが要素の境界外に出たとしても、その要素が引き続きイベントを受け取ることができます。これはスライダーやドラッグ操作の実装に非常に有用です。 - マルチタッチの追跡: 従来のマウスイベントとは異なり、複数の同時接触ポイントを個別に追跡可能です。
5. CSS の pointer-events プロパティ
CSS の pointer-events プロパティは API とは別の機能で、ある要素がポインター操作のターゲットになるかどうかを制御します。
style="pointer-events: none;"HTML要素とその子孫要素に対するすべてのマウス・タッチ操作を無効化します。style="pointer-events: auto;"デフォルトの動作に戻します。
このCSSプロパティは、UIのレイヤーが重なっている場合や、JavaScriptのロジックを変更せずに特定の要素へのインタラクションを一時的に無効化したい場合に非常に便利です。