Element: gotpointercapture イベント

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2020年7月⁩.

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

構文

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

addEventListener("gotpointercapture", (event) => {});

ongotpointercapture = (event) => {};

イベント型

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

イベントプロパティ

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

PointerEvent.altitudeAngle 読取専用 Experimental: トランスデューサー（ポインターまたはスタイラス）の軸と端末画面の X-Y 平面との間の角度を表します。
PointerEvent.azimuthAngle 読取専用 Experimental: Y-Z 平面と、トランスデューサー（ポインターまたはスタイラス）の軸と Y 軸の両方を格納する平面との間の角度を表します。
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 読取専用: このポインターがこのポインター種別の主ポインターを表すかどうかを示します。

例

この例は <p> 要素を取得し、 gotpointercapture イベントを待ち受けします。 setPointerCapture() を pointerdown イベントの要素上で呼び出し、 gotpointercapture を発生させます。

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

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

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

同じ例ですが、ongotpointercapture イベントハンドラーを使用して行います。

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

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

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