Element: lostpointercapture イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
lostpointercapture イベントは、キャプチャされたポインターが解放されたときに発生します。
構文
このイベント名を addEventListener() などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("lostpointercapture", (event) => {});
onlostpointercapture = (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読取専用-
このポインターがこのポインター種別の主ポインターを表すかどうかを示します。
例
この例は要素で lostpointercapture イベントを待ち受けし、その要素の pointerdown でポインターをキャプチャします。その後でユーザーがポインターを開放すると、 lostpointercapture が発生します。
const para = document.querySelector("p");
para.addEventListener("lostpointercapture", () => {
console.log("I've been released!");
});
para.addEventListener("pointerdown", (event) => {
para.setPointerCapture(event.pointerId);
});
同じ例ですが、 onlostpointercapture イベントハンドラーを使用して行います。
const para = document.querySelector("p");
para.onlostpointercapture = () => {
console.log("I've been released!");
};
para.addEventListener("pointerdown", (event) => {
para.setPointerCapture(event.pointerId);
});
仕様書
| Specification |
|---|
| Pointer Events # the-lostpointercapture-event |
| Pointer Events # dom-globaleventhandlers-onlostpointercapture |