Element: pointermove イベント

pointermove はポインターの座標が変化し、かつブラウザーのタッチ操作によってポインターがキャンセルされていないときに発生します。

構文

このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

addEventListener('pointermove', (event) => {});

onpointermove = (event) => { };

イベント型

イベントプロパティ

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

PointerEvent.pointerId 読取専用

イベントを発生させたポインターの固有の識別子です。

PointerEvent.width 読取専用

ポインターが接触するジオメトリーの幅(X 軸の大きさ、CSS ピクセル単位)。

PointerEvent.height 読取専用

ポインターが接触するジオメトリーの高さ(Y 軸の大きさ、CSS ピクセル単位)。

PointerEvent.pressure 読取専用

ポインター入力の正規化された圧力で、範囲は 0 から 1 です。ここで 01 は、それぞれハードウェアが検出可能な最小圧力と最大圧力を表します。

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 型で、位置、移動距離、ボタンの状態など、ユーザーとポインティングデバイスとの対話について知る必要のあるすべての情報を提供します。

addEventListener() を使用した例です。

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

para.addEventListener('pointermove', (event) => {
  console.log('Pointer moved');
});

onpointermove イベントハンドラープロパティを使用した例です。

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

para.onpointermove = (event) => {
  console.log('Pointer moved');
};

仕様書

Specification
Pointer Events
# the-pointermove-event
Pointer Events
# dom-globaleventhandlers-onpointermove

ブラウザーの互換性

BCD tables only load in the browser

関連情報

Internet Explorer は、以前は MSPointerHover というイベントにも対応していました。これは、接点(通常はペン)が表面に触れることなく要素の上を移動したときに発行されるイベントです。この専用メソッドは Internet Explorer 固有のもので、Internet Explorer 11 で非推奨となりました。IE11 からは pointermove イベントがすべてのペンの動きに対して(ホバリングしているかどうかに関係なく)発行されるようになりました。