Element: pointerdown イベント

pointerdown イベントは、ポインターがアクティブになったときに発生します。マウスでは、その機器のボタンが押されていない状態から 1 つ以上のボタンが押されている状態に遷移したときに発生します。タッチ操作では、デジタイザーに物理的な接触が行われたときに発生します。ペンでは、スタイラスがデジタイザーに物理的に接触したときに発生します。

メモ: 直接操作ができるタッチ画面のブラウザーでは、 pointerdown イベントで暗黙的なポインターキャプチャが発生するため、ターゲットが以降のすべてのポインターイベントをキャプチャし、キャプチャターゲット上で発生したかのように扱います。そのため、 pointerover, pointerenter, pointerleave, pointerout はこのキャプチャーが発生している間は発生しません。このキャプチャはターゲット要素上で element.releasePointerCapture を呼び出すことで手動で解除することができ、 pointerup または pointercancel イベントの後で暗黙的に解除されます。

構文

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

js
addEventListener("pointerdown", (event) => {});

onpointerdown = (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 読取専用

このポインターがこのポインター種別の主ポインターを表すかどうかを示します。

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

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

para.addEventListener("pointerdown", (event) => {
  console.log("Pointer down event");
});

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

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

para.onpointerdown = (event) => {
  console.log("Pointer down event");
};

仕様書

Specification
Pointer Events
# the-pointerdown-event
Pointer Events
# dom-globaleventhandlers-onpointerdown

ブラウザーの互換性

BCD tables only load in the browser

関連情報