PointerEvent

PointerEvent インターフェイスは、接触点のジオメトリ、イベントを生成したデバイスタイプ、接触面に加えられた圧力の量など、ポインタによって生成された DOM イベントの状態を表します。

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

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

コンストラクタ

PointerEvent()
信頼できない合成 PointerEvent を作成します。

プロパティ

このインターフェイスは、MouseEvent および Event からプロパティを継承します。

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 インターフェイスにはいくつかのイベントタイプがあります。 どのイベントが発生したかを判断するには、イベントの type プロパティを調べます。

: 多くの場合、ポインタとマウスの両方のイベントが送信されることに注意することが重要です(ポインタ固有でないコードでもユーザーと対話できるようにするため)。 ポインタイベントを使用する場合は、event.preventDefault() を呼び出してマウスイベントも送信されないようにする必要があります。
pointerover
このイベントは、ポインティングデバイスが要素のヒットテスト境界内に移動したときに発生します。
pointerenter
このイベントは、ポインティングデバイスが要素またはその子孫の1つのヒットテスト境界内に移動したときに発生します。 これには、ホバーをサポートしないデバイスからの pointerdown イベントの結果も含まれます(pointerdown を参照)。 このイベントタイプは pointerover に似ていますが、バブリングしないという点で異なります。
pointerdown
このイベントは、ポインタがアクティブになると発生します。 マウスの場合、ボタンが押されていない状態から少なくとも1つのボタンが押された状態に移行したときに発生します。 タッチの場合、物理的な接触がデジタイザとなされたときに発生します。 ペンの場合、スタイラスがデジタイザと物理的に接触したときに発生します。
pointermove
このイベントは、ポインタが座標を変更したときに発生します。
pointerup
このイベントは、ポインタがアクティブでなくなったときに発生します。
pointercancel
ブラウザーは、ポインタがイベントを生成できなくなったと判断した場合(例えば、関連するデバイスが無効になった場合)、このイベントを発生させます。
pointerout
このイベントは、次のようないくつかの理由で発生します。 ポインティングデバイスが要素のヒットテスト境界外に移動した。 ホバーをサポートしていないデバイスの pointerup イベントが発生した(pointerup を参照)。 pointercancel イベントの発生後(pointercancel を参照)。 ペン/スタイラスがデジタイザで検出可能なホバー範囲を離脱したとき。
pointerleave
このイベントは、ポインティングデバイスが要素のヒットテスト境界外に移動したときに発生します。 ペンデバイスの場合、このイベントは、スタイラスがデジタイザで検出可能なホバー範囲を離脱したときに発生します。
gotpointercapture
このイベントは、要素がポインタキャプチャを受け取ったときに発生します。
lostpointercapture
このイベントは、ポインタに対するポインタキャプチャが解放された後に発生します。

GlobalEventHandlers

GlobalEventHandlers.onpointerover
pointerover イベントのためのグローバルイベントハンドラ
GlobalEventHandlers.onpointerenter
pointerenter イベントのためのグローバルイベントハンドラ
GlobalEventHandlers.onpointerdown
pointerdown イベントのためのグローバルイベントハンドラ
GlobalEventHandlers.onpointermove
pointermove イベントのためのグローバルイベントハンドラ
GlobalEventHandlers.onpointerup
pointerup イベントのためのグローバルイベントハンドラ
GlobalEventHandlers.onpointercancel
pointercancel イベントのためのグローバルイベントハンドラ
GlobalEventHandlers.onpointerout
 pointerout イベントのためのグローバルイベントハンドラ
GlobalEventHandlers.onpointerleave
pointerleave イベントのためのグローバルイベントハンドラ

各プロパティ、イベントタイプ、およびグローバルイベントハンドラの例は、それぞれの参照ページに含まれています。

仕様

仕様 状態 コメント
Pointer Events - Level 2 Extensions
PointerEvent の定義
ドラフト getCoalescedEvents() メソッドを追加しました。
Pointer Events – Level 2
PointerEvent の定義
草案 twist プロパティと tangentialPressure プロパティを追加しました。
Pointer Events
PointerEvent の定義
勧告 初期定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
PointerEventChrome 完全対応 55Edge 完全対応 12Firefox 完全対応 59
完全対応 59
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
完全対応 11
部分対応 10
接頭辞付き 補足
接頭辞付き MS のベンダー接頭辞が必要
補足 See MSDN Pointer events updates.
Opera 完全対応 42Safari 完全対応 13WebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 完全対応 41
無効
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 42Safari iOS 完全対応 13Samsung Internet Android 完全対応 6.0
PointerEvent() constructorChrome 完全対応 55Edge 完全対応 12Firefox 完全対応 59
完全対応 59
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
完全対応 11
部分対応 10
接頭辞付き 補足
接頭辞付き MS のベンダー接頭辞が必要
補足 See MSDN Pointer events updates.
Opera 完全対応 42Safari 完全対応 13WebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 完全対応 41
無効
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 42Safari iOS 完全対応 13Samsung Internet Android 完全対応 6.0
getCoalescedEvents
実験的
Chrome 完全対応 58Edge 未対応 なしFirefox 完全対応 59IE 未対応 なしOpera 完全対応 45Safari 未対応 なしWebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 部分対応 59
無効
部分対応 59
無効
無効 From version 59: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 完全対応 7.0
heightChrome 完全対応 55Edge 完全対応 12Firefox 完全対応 59
完全対応 59
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
完全対応 11
部分対応 10
補足
補足 Returns values in screen pixels instead of CSS document pixels.
Opera 完全対応 42Safari 完全対応 13WebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 完全対応 41
無効
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 42Safari iOS 完全対応 13Samsung Internet Android 完全対応 6.0
isPrimaryChrome 完全対応 55Edge 完全対応 12Firefox 完全対応 59
完全対応 59
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10Opera 完全対応 42Safari 完全対応 13WebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 完全対応 41
無効
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 42Safari iOS 完全対応 13Samsung Internet Android 完全対応 6.0
pointerIdChrome 完全対応 55Edge 完全対応 12Firefox 完全対応 59
完全対応 59
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10Opera 完全対応 42Safari 完全対応 13WebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 完全対応 41
無効
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 42Safari iOS 完全対応 13Samsung Internet Android 完全対応 6.0
pointerTypeChrome 完全対応 55Edge 完全対応 12Firefox 完全対応 59
完全対応 59
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
完全対応 11
部分対応 10
補足
補足 Returns an integer enumeration instead of a string.
Opera 完全対応 42Safari 完全対応 13WebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 完全対応 41
無効
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 42Safari iOS 完全対応 13Samsung Internet Android 完全対応 6.0
pressureChrome 完全対応 55Edge 完全対応 12Firefox 完全対応 59
完全対応 59
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
完全対応 11
部分対応 10
補足
補足 Returns 0 instead of 0.5 on hardware that doesn't support pressure.
Opera 完全対応 42Safari 完全対応 13WebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 完全対応 41
無効
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 42Safari iOS 完全対応 13Samsung Internet Android 完全対応 6.0
tangentialPressureChrome 完全対応 58Edge 未対応 なしFirefox 完全対応 59
完全対応 59
完全対応 54
無効
無効 From version 54: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 45Safari 完全対応 13WebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 完全対応 54
無効
完全対応 54
無効
無効 From version 54: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43Safari iOS 完全対応 13Samsung Internet Android 完全対応 7.0
tiltXChrome 完全対応 55Edge 完全対応 12Firefox 完全対応 59
完全対応 59
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10Opera 完全対応 42Safari 完全対応 13WebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 完全対応 41
無効
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 42Safari iOS 完全対応 13Samsung Internet Android 完全対応 6.0
tiltYChrome 完全対応 55Edge 完全対応 12Firefox 完全対応 59
完全対応 59
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 10Opera 完全対応 42Safari 完全対応 13WebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 完全対応 41
無効
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 42Safari iOS 完全対応 13Samsung Internet Android 完全対応 6.0
twistChrome 完全対応 58Edge 完全対応 18Firefox 完全対応 59
完全対応 59
完全対応 54
無効
無効 From version 54: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 45Safari 完全対応 13WebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 完全対応 54
無効
完全対応 54
無効
無効 From version 54: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 43Safari iOS 完全対応 13Samsung Internet Android 完全対応 7.0
widthChrome 完全対応 55Edge 完全対応 12Firefox 完全対応 59
完全対応 59
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
完全対応 11
部分対応 10
補足
補足 Returns values in screen pixels instead of CSS document pixels.
Opera 完全対応 42Safari 完全対応 13WebView Android 完全対応 55Chrome Android 完全対応 55Firefox Android 完全対応 41
無効
完全対応 41
無効
無効 From version 41: this feature is behind the dom.w3c_pointer_events.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 42Safari iOS 完全対応 13Samsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報