Pointer Events | Frontend Practical Guide

Widely available すべての主要ブラウザで対応済み。安心して使用可能。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`PointerEvent`	55	12	59	13	55	13
`auxclick_event (type pointerevent)` `PointerEvent` ですか	92	92	129	18.2	92	18.2
`click_event (type pointerevent)` `PointerEvent` ですか	92	92	129	18.2	92	18.2
`contextmenu_event (type pointerevent)` `PointerEvent` ですか	92	92	129	18.2	92
`gotpointercapture_event` gotpointercapture イベントは、要素が setPointerCapture() を使用してポインターをキャプチャしたときに発生します。	57	17	59	13	57	13
`hasPointerCapture` hasPointerCapture() は Element インターフェイスのメソッドで、それを呼び出した要素が、指定されたポインター ID によって識別されるポインターに対するポインターキャプチャを持つかどうかを示します。	55	79	59	13	55	13
`lostpointercapture_event` lostpointercapture イベントは、キャプチャされたポインターが解放されたときに発生します。	57	17	59	13	57	13
`pointercancel_event` pointercancel イベントは、ブラウザーがもうポインターイベントが存在しないと判断したとき、または Element/pointerdown_event イベントが発生した後で、ポインターがビューポートのパン、ズーム、スクロールを操作するために使用されたときに発生します。	55	12	59	13	55	13
`pointerdown_event` pointerdown イベントは、ポインターがアクティブになったときに発生します。マウスでは、その機器のボタンが押されていない状態から 1 つ以上のボタンが押されている状態に遷移したときに発生します。タッチ操作では、デジタイザーに物理的な接触が行われたときに発生します。ペンでは、スタイラスがデジタイザーに物理的に接触したときに発生します。	55	12	59	13	55	13
`pointerenter_event` pointerenter イベントは、ポインティングデバイスが要素またはその子孫のヒットテスト領域に入ったときに発生します。ホバーに対応していない機器では Element/pointerdownevent イベントの結果として移動した場合も含みます（Element/pointerdownevent を参照）。	55	12	59	13	55	13
`pointerleave_event` pointerleave イベントは、ポインティングデバイスが要素のヒットテスト領域を出たときに発生します。ペンデバイスでは、このイベントはデジタイザーが検出可能なホバー範囲をスタイラスが離れたときに発生します。	55	12	59	13	55	13
`pointermove_event` pointermove はポインターの座標が変化し、かつブラウザーのタッチ操作によってポインターがキャンセルされていないときに発生します。	55	12	59	13	55	13
`pointerout_event` pointerout イベントはいくつかの理由で発生します。ポインティングデバイスが要素のヒットテスト境界を出たとき、ホバーに対応していない端末で Element/pointerupevent イベントが発生したとき (Element/pointerupevent を参照)、 Element/pointercancelevent イベントが発生した後 (Element/pointercancelevent を参照)、スタイラスペンがデジタイザーで検出可能なホバー範囲を離れたとき、などです。	55	12	59	13	55	13
`pointerover_event` pointerover イベントは、ポインティングデバイスが要素のヒットテスト境界内に移動したときに発生します。	55	12	59	13	55	13
`pointerrawupdate_event` pointerrawupdate は PointerEvent で、ポインターに pointerdown または pointerup イベントが発生しない変化が起きたときに発生します。これらのプロパティの一覧は pointermove を参照してください。	77	79	148		77
`pointerup_event` pointerup イベントは、ポインターがアクティブではなくなったときに発生します。これは代わりに pointercancel イベントを用いて取得できることを覚えておいてください。	55	12	59	13	55	13
`releasePointerCapture` releasePointerCapture() は Element インターフェイスのメソッドで、特定の（PointerEvent の）ポインターに対して以前に設定されたポインターキャプチャを解放（停止）します。	55	12	59	13	55	13
`setPointerCapture` setPointerCapture() は Element インターフェイスのメソッドで、特定の要素をこれ以降のポインターイベントのキャプチャターゲットとして指定するために使用します。（Element.releasePointerCapture() を介して、または Element/pointerup_event イベントが発生して）キャプチャが解放されるまで、それ以降のポインターのイベントはキャプチャ要素をターゲットにします。	55	12	59	13	55	13
`maxTouchPoints` maxTouchPoints は Navigator インターフェイスの読み取り専用プロパティで、現在の端末で対応している同時タッチ接触点の最大数を返します。	35	12	59	13	35	13
`altitudeAngle` altitudeAngle は PointerEvent インターフェイスの読み取り専用のプロパティで、トランスデューサー（ポインターまたはスタイラス）の軸と端末画面の X-Y 平面の間の角度を表します。高度角 (altitude angle) は、トランスデューサーが画面に対して垂直であるか、平行であるか、またはその中間の角度であるかを示します。	86	86	131	18.2	86	18.2
`azimuthAngle` azimuthAngle は PointerEvent インターフェイスの読み取り専用プロパティで、 Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸および Y 軸の両方を含む平面との間の角度を表します。	86	86	131	18.2	86	18.2
`getCoalescedEvents` getCoalescedEvents() は PointerEvent インターフェイスのメソッドで、単一の Element/pointermoveevent または Element/pointerrawupdateevent イベントに統合（マージ）された PointerEvent インスタンスの配列を返します。ユーザーエージェントは、複数の更新を多数の Element/pointermove_event イベントの並びを単一のイベントに統合します。これにより、ユーザーエージェントが処理するイベント数が減るため、処理速度の向上に役立ちますが、特に高速かつ大規模な動きの場合、追跡の粒度と精度が低下する可能性があります。	58	79	59	18.2	58	18.2
`getPredictedEvents` getPredictedEvents() は PointerEvent インターフェイスのメソッドで、将来のポインター位置を予測した一連の PointerEvent インスタンスを返します。予測位置の計算方法はユーザーエージェントによって異なりますが、過去の位置、現在の速度、軌道に基づいて計算されます。	77	79	89	18.2	77	18.2
`height` height は PointerEvent インターフェイスの読み取り専用プロパティで、ポインターの接触形状の y 軸方向の高さを（CSS ピクセル単位で）表します。またポインター機器のソース (指など) によっては、与えられたポインターに対して、各イベントが異なる値を生成することがあります。	55	12	59	13	55	13
`isPrimary` isPrimary は PointerEvent インターフェイスの読み取り専用プロパティで、イベントを生成したポインター機器が主ポインターであるかどうかを示します。イベントの発生原因となったポインターが主機器である場合は true を返し、それ以外の場合は false を返します。	55	12	59	13	55	13
`persistentDeviceId` persistentDeviceId は PointerEvent インターフェイスの読み取り専用のプロパティで、この PointerEvent を生成したポインティングデバイスの固有の識別子です。これは、同時に画面の操作を行う複数のポインティングデバイス（ペンなど）を特定するための安全で信頼性の高い方法を提供します。	128	128	141		128
`PointerEvent` PointerEvent() コンストラクターは、新しい信頼できない合成 PointerEvent オブジェクトのインスタンスを作成します。	55	12	59	13	55	13
`PointerEvent (options altitudeAngle parameter)` `options.altitudeAngle` パラメータ	86	86	131	18.2	86	18.2
`PointerEvent (options azimuthAngle parameter)` `options.azimuthAngle` パラメータ	86	86	131	18.2	86	18.2
`pointerId` pointerId は PointerEvent インターフェイスの読み取り専用プロパティで、特定のポインターのイベントに割り当てられた識別子です。識別子は一意であり、他のすべてのアクティブポインターのイベントの識別子と異なります。値はランダムに生成される可能性があるため、特定の意味を伝えることは保証されません。	55	12	59	13	55	13
`pointerType` pointerType は PointerEvent インターフェイスの読み取り専用プロパティで、特定のポインターイベントを引き起こした機器の種類（マウス、ペン、タッチのいずれか）を示します。	55	12	59	13	55	13
`pointerType (fractional coordinates)` `mouse` の分位座標。	64	79	135	26.2	64	26.2
`pressure` pressure は PointerEvent インターフェイスの読み取り専用プロパティで、ポインター入力の正規化された圧力を示します。	55	12	59	13	55	13
`tangentialPressure` tangentialPressure は PointerEvent インターフェイスの読み取り専用プロパティで、ポインター入力の正規化された接線方向の圧力（バレル圧力またはシリンダー応力（cylinder stress）とも呼ばれます）を表します。	57	79	59	13	57	13
`tiltX` tiltX は PointerEvent インターフェイスの読み取り専用プロパティで、ポインターの Y-Z 平面と画面との間の角度（度単位）です。このプロパティは通常、ペン/スタイラス型のポインターにのみ役立ちます。	55	12	59	13	55	13
`tiltY` tiltY は PointerEvent インターフェイスの読み取り専用プロパティで、ポインターの X-Z 平面と画面の間の角度（度単位）です。このプロパティは通常、ペン/スタイラス型のポインターのみ役立ちます。	55	12	59	13	55	13
`twist` twist は PointerEvent インターフェイスの読み取り専用プロパティで、ポインター（ペンやスタイラスなど）の主軸を中心とした時計回りの回転を度数で表します。	57	18	59	13	57	13
`width` width は PointerEvent インターフェイスの読み取り専用プロパティで、CSS ピクセルで測定された、x 軸に沿ったポインターの接触形状の幅を表します。ポインター機器のソース（指など）に応じて、特定のポインターに対して、各イベントは異なる値を生成することがあります。	55	12	59	13	55	13

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

const para = document.querySelector("p");

para.addEventListener("gotpointercapture", () => {
  console.log("I've been captured!");
});

para.addEventListener("pointerdown", (event) => {
  para.setPointerCapture(event.pointerId);
});

実務での使いどころ

Pointer Events の活用

gotpointercapture イベントは、要素が setPointerCapture() を使用してポインターをキャプチャしたときに発生します。

注意点

古いブラウザでは対応していない場合がある。

実装メモ

一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

対応ブラウザ

基本構文

実務での使いどころ

Pointer Events の活用

注意点

実装メモ

参考リンク