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);});