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 2020年7月.
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> | 
ブラウザーの互換性
Loading…