Element: pointermove イベント
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2020年7月以降、すべてのブラウザーで利用可能です。
pointermove イベントは、ポインターの座標が変化し、ブラウザーの touch-action によってポインターがキャンセルされていないときに発生します。また、別のポインターイベントを発生させない範囲でポインターのほかのプロパティが変化した場合にも発生します。これには、圧力、接線圧力、傾き、回転、接触ジオメトリー（幅と高さ）、同時押しボタンの変化が含まれます。
イベントループ内で、同じポインター ID を持つ別の pointermove イベントがまだ配送されていない場合、このイベントには統合されたイベントが含まれることがあります。イベントが統合される場合、配送されたイベントの target は最後に統合されたイベントと同じです。イベントの統合については、PointerEvent.getCoalescedEvents() の説明を参照してください。
このイベントは mousemove イベントとよく似ていますが、より多くの機能があります。ポインターボタンが押されているかどうかにかかわらず発生します。ユーザーがポインターを動かす速さ、マシンの速度、ほかに実行中のタスクやプロセスなどに応じて、非常に高い頻度で発生することがあります。
pointerrawupdate と pointermove の違いは、発生頻度です。ブラウザーはパフォーマンスを向上させるために pointermove イベントの配送を遅らせることがありますが、pointerrawupdate イベントはブラウザーが生成できる限り速く、頻繁に配送されます。ほとんどの用途では、パフォーマンス上の問題を避けるために pointermove を使用してください。
構文
addEventListener() でこのイベント名を使用してください。
addEventListener("pointermove", (event) => { })
または、インターフェイスのイベントハンドラープロパティに代入します。
onpointermove = (event) => { }
イベント型
PointerEvent です。 Event を継承しています。
使用上のメモ
このイベントは PointerEvent 型で、位置、移動距離、ボタンの状態など、ユーザーとポインティングデバイスとの対話について知る必要のあるすべての情報を提供します。
例
addEventListener() を使用した例です。
const para = document.querySelector("p");
para.addEventListener("pointermove", (event) => {
console.log("Pointer moved");
});
onpointermove イベントハンドラープロパティを使用した例です（onpointermove を使用して追加済みの他のイベントリスナーがある場合、それらは置き換えられます）。
const para = document.querySelector("p");
para.onpointermove = (event) => {
console.log("Pointer moved");
};
仕様書
| 仕様書 |
|---|
| Pointer Events # pointermove |
| Pointer Events # dom-globaleventhandlers-onpointermove |