PointerEvent
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
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
-
このイベントは、ポインターが座標を変更したときに発生します。
pointerrawupdate
Experimental-
このイベントは、ポインターのいずれかのプロパティが変更されたときに発生します。
pointerup
-
このイベントは、ポインターがアクティブでなくなったときに発生します。
pointercancel
-
ブラウザーは、ポインターがイベントを生成できなくなったと判断した場合(例えば、関連するデバイスが無効になった場合)、このイベントを発生させます。
pointerout
-
このイベントは、次のようないくつかの理由で発生します。 ポインティングデバイスが要素のヒットテスト境界外に移動した。 ホバーをサポートしていないデバイスの
pointerup
イベントが発生した(pointerup
を参照)。pointercancel
イベントの発生後(pointercancel
を参照)。 ペン/スタイラスがデジタイザーで検出可能なホバー範囲を離脱したとき。 pointerleave
-
このイベントは、ポインティングデバイスが要素のヒットテスト境界外に移動したときに発生します。 ペンデバイスの場合、このイベントは、スタイラスがデジタイザーで検出可能なホバー範囲を離脱したときに発生します。
gotpointercapture
-
このイベントは、要素がポインターキャプチャを受け取ったときに発生します。
lostpointercapture
-
このイベントは、ポインターに対するポインターキャプチャが解放された後に発生します。
例
各プロパティ、種類のイベント、およびグローバルイベントハンドラーの例は、それぞれのリファレンスページに含まれています。
仕様書
Specification |
---|
Pointer Events # pointerevent-interface |
ブラウザーの互換性
BCD tables only load in the browser