Element: pointerdown イベント

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

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

構文

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

js

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

onpointerdown = (event) => { };

イベント型

PointerEvent です。 Event を継承しています。

Event UIEvent MouseEvent 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 読取専用

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

例

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

関連情報