PointerEvent
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年7月.
* Some parts of this feature may have varying levels of support.
PointerEvent インターフェイスは、接触点の形状、イベントを生成した機器の種類、接触面に加えられた圧力の量など、ポインターによって生成された DOM イベントの状態を表します。
ポインターは、入力機器（マウス、ペン、またはタッチパネルの上の接触点など）のハードウェアにとらわれない表現です。 ポインターは、画面などの接触面上の特定の座標（または座標の集合）をターゲットにすることができます。
ポインターのヒットテストは、ブラウザーがポインターイベントのターゲット要素を決定するために使用する手続です。通常、これはポインターの位置と、画面媒体上の文書内の要素の視覚的なレイアウトを考慮して決定します。
コンストラクター
PointerEvent()-
信頼できない合成
PointerEventを作成します。
プロパティ
このインターフェイスは、MouseEvent および Event からプロパティを継承しています。
PointerEvent.altitudeAngle読取専用-
トランスデューサー（ポインターまたはスタイラス）の軸と機器の画面の X-Y 平面のなす角度を表します。
PointerEvent.azimuthAngle読取専用-
Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸と Y 軸の両方を格納する平面との間の角度を表します。
PointerEvent.persistentDeviceId読取専用 Experimental-
PointerEventを生成するポインティングデバイス用の固有の識別子。 PointerEvent.pointerId読取専用-
イベントの原因となっているポインターの一意の識別子。
PointerEvent.width読取専用-
ポインターの接触形状の幅（X 軸上の大きさ、CSS ピクセル単位）。
PointerEvent.height読取専用-
ポインターの接触形状の高さ（Y 軸上の大きさ、CSS ピクセル単位）。
PointerEvent.pressure読取専用-
0 から 1 の範囲のポインター入力の正規化された圧力。 ここで、0 と 1 は、それぞれハードウェアが検出できる最小圧力と最大圧力を表します。
PointerEvent.tangentialPressure読取専用-
ポインター入力の正規化された接線圧力（バレル圧力またはシリンダー応力（cylinder stress）とも呼ばれます）は
-1から1の範囲で、0はコントロールの中立位置です。 PointerEvent.tiltX読取専用-
Y-Z 平面と、ポインター（ペン/スタイラスなど）軸と Y 軸の両方を含む平面との間の平面角度（度単位、
-90から90の範囲）。 PointerEvent.tiltY読取専用-
X-Z 平面と、ポインター（ペン/スタイラスなど）軸と X 軸の両方を含む平面との間の平面角度（度単位、
-90から90の範囲）。 PointerEvent.twist読取専用-
ポインター（ペン/スタイラスなど）の長軸を中心とした時計回りの回転の度数（
0から359の範囲の値）。 PointerEvent.pointerType読取専用-
イベントの原因となった機器の種類（マウス、ペン、タッチなど）を示します。
PointerEvent.isPrimary読取専用-
ポインターがこのポインターの種類の主ポインターを表しているかどうかを示します。
メソッド
PointerEvent.getCoalescedEvents()安全なコンテキスト用-
配信された
pointermoveイベントに結合されたすべてのPointerEventインスタンスの列を返します。 PointerEvent.getPredictedEvents()-
配信された
pointermoveイベントの結合イベントの後に続くとブラウザーが予測したPointerEventインスタンスの列を返します。
ポインターイベントの種類
PointerEvent インターフェイスには、複数の種類のイベントがあります。 どのイベントが発生したかを判断するには、イベントの type プロパティを調べてください。
メモ:
多くの場合、ポインターとマウスの両方のイベントが送信されることに注意することが重要です（ポインター固有でないコードでもユーザーと対話できるようにするため）。ポインターイベントを使用する場合は、Event.preventDefault() を呼び出してマウスイベントが共に送信されないようにする必要があります。
pointerover-
このイベントは、ポインティングデバイスが要素のヒットテスト境界内に移動したときに発生します。
pointerenter-
このイベントは、ポインティングデバイスが要素またはその子孫の 1 つのヒットテスト境界内に移動したときに発生します。 これには、ホバーに対応していない機器からの
pointerdownイベントの結果も含まれます（pointerdownを参照）。 この種類のイベントはpointeroverに似ていますが、バブリングしないという点が異なります。 pointerdown-
このイベントは、ポインターがアクティブになると発生します。 マウスの場合、ボタンが押されていない状態から少なくとも 1 つのボタンが押された状態に移行したときに発生します。タッチの場合、物理的な接触がデジタイザーとなされたときに発生します。 ペンの場合、スタイラスがデジタイザーと物理的に接触したときに発生します。
メモ: 直接操作を受け付けるタッチ画面のブラウザーでは、
pointerdownイベントにより暗黙的なポインターキャプチャが行われ、以降のすべてのポインターイベントが、キャプチャターゲット上で発生したかのようにターゲットに捕捉されます。そのためpointerover、pointerenter、pointerleave、pointeroutはキャプチャが設定されている間は発生しません。キャプチャはターゲット要素上でelement.releasePointerCaptureを呼び出すことで手動で解除することができ、またpointerupまたはpointercancelイベントの後で暗黙的に解放されます。 pointermove-
このイベントは、ポインターが座標を変更したときに発生します。
pointerrawupdateExperimental-
このイベントは、ポインターのいずれかのプロパティが変更されたときに発生します。
pointerup-
このイベントは、ポインターがアクティブでなくなったときに発生します。
pointercancel-
ブラウザーは、ポインターがイベントを生成できなくなったと判断した場合（例えば、関連するデバイスが無効になった場合）、このイベントを発生させます。
pointerout-
このイベントは、次のようないくつかの理由で発生します。 ポインティングデバイスが要素のヒットテスト境界外に移動した。 ホバーをサポートしていないデバイスの
pointerupイベントが発生した（pointerupを参照）。pointercancelイベントの発生後（pointercancelを参照）。 ペン/スタイラスがデジタイザーで検出可能なホバー範囲を離脱したとき。 pointerleave-
このイベントは、ポインティングデバイスが要素のヒットテスト境界外に移動したときに発生します。 ペンデバイスの場合、このイベントは、スタイラスがデジタイザーで検出可能なホバー範囲を離脱したときに発生します。
gotpointercapture-
このイベントは、要素がポインターキャプチャを受け取ったときに発生します。
lostpointercapture-
このイベントは、ポインターに対するポインターキャプチャが解放された後に発生します。
例
各プロパティ、種類のイベント、およびグローバルイベントハンドラーの例は、それぞれのリファレンスページに含まれています。
仕様書
| Specification |
|---|
| Pointer Events # pointerevent-interface |
ブラウザーの互換性
Loading…