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.

* Some parts of this feature may have varying levels of support.

PointerEvent インターフェイスは、接触点の形状、イベントを生成した機器の種類、接触面に加えられた圧力の量など、ポインターによって生成された DOM イベントの状態を表します。

ポインターは、入力機器(マウス、ペン、またはタッチパネルの上の接触点など)のハードウェアにとらわれない表現です。 ポインターは、画面などの接触面上の特定の座標(または座標の集合)をターゲットにすることができます。

ポインターのヒットテストは、ブラウザーがポインターイベントのターゲット要素を決定するために使用する手続です。通常、これはポインターの位置と、画面媒体上の文書内の要素の視覚的なレイアウトを考慮して決定します。

Event UIEvent MouseEvent PointerEvent

コンストラクター

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 イベントにより暗黙的なポインターキャプチャが行われ、以降のすべてのポインターイベントが、キャプチャターゲット上で発生したかのようにターゲットに捕捉されます。そのため pointeroverpointerenterpointerleavepointerout はキャプチャが設定されている間は発生しません。キャプチャはターゲット要素上で element.releasePointerCapture を呼び出すことで手動で解除することができ、また pointerup または pointercancel イベントの後で暗黙的に解放されます。

pointermove

このイベントは、ポインターが座標を変更したときに発生します。

pointerrawupdate Experimental

このイベントは、ポインターのいずれかのプロパティが変更されたときに発生します。

pointerup

このイベントは、ポインターがアクティブでなくなったときに発生します。

pointercancel

ブラウザーは、ポインターがイベントを生成できなくなったと判断した場合(例えば、関連するデバイスが無効になった場合)、このイベントを発生させます。

pointerout

このイベントは、次のようないくつかの理由で発生します。 ポインティングデバイスが要素のヒットテスト境界外に移動した。 ホバーをサポートしていないデバイスの pointerup イベントが発生した(pointerup を参照)。 pointercancel イベントの発生後(pointercancel を参照)。 ペン/スタイラスがデジタイザーで検出可能なホバー範囲を離脱したとき。

pointerleave

このイベントは、ポインティングデバイスが要素のヒットテスト境界外に移動したときに発生します。 ペンデバイスの場合、このイベントは、スタイラスがデジタイザーで検出可能なホバー範囲を離脱したときに発生します。

gotpointercapture

このイベントは、要素がポインターキャプチャを受け取ったときに発生します。

lostpointercapture

このイベントは、ポインターに対するポインターキャプチャが解放された後に発生します。

各プロパティ、種類のイベント、およびグローバルイベントハンドラーの例は、それぞれのリファレンスページに含まれています。

仕様書

Specification
Pointer Events
# pointerevent-interface

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
PointerEvent
PointerEvent() constructor
options.altitudeAngle parameter
options.azimuthAngle parameter
altitudeAngle
azimuthAngle
getCoalescedEvents
getPredictedEvents
height
isPrimary
persistentDeviceId
Experimental
pointerId
pointerType
Fractional coordinates for mouse.
pressure
tangentialPressure
tiltX
tiltY
twist
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Has more compatibility info.

関連情報