Element: pointerleave イベント
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.
pointerleave
イベントは、ポインティングデバイスが要素のヒットテスト領域を出たときに発生します。ペンデバイスでは、このイベントはデジタイザーが検出可能なホバー範囲をスタイラスが離れたときに発生します。
構文
このイベント名を addEventListener()
などのメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("pointerleave", (event) => {});
onpointerleave = (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
読取専用-
このポインターがこのポインター種別の主ポインターを表すかどうかを示します。
例
addEventListener()
を使用した例です。
const para = document.querySelector("p");
para.addEventListener("pointerleave", (event) => {
console.log("Pointer left element");
});
onpointerleave
イベントハンドラープロパティを使用した例です。
const para = document.querySelector("p");
para.onpointerleave = (event) => {
console.log("Pointer left element");
};
仕様書
Specification |
---|
Pointer Events # the-pointerleave-event |
Pointer Events # dom-globaleventhandlers-onpointerleave |
ブラウザーの互換性
BCD tables only load in the browser