pointerleave ( onpointerleave )イベント
pointerleave ( onpointerleave )イベントは、ポインターがエレメントの領域から離れたら発生するイベントです。
バブリング機能がないために、子エレメント上も親エレメン卜の領域内とみなされます。
タッチデバイスでは、一度領域上にポインターがあると判断されてから、別の場所にポインターが移動したと判断されたら発生します。
document.getElementById('example').addEventListener("pointerleave", (event)=>{ console.log( 'event type : ' + event.type ); });
詳しくは Example を参照してください
似たイベントに pointerout があります。このイベントは子エレメントをエレメントの領域に含みませんので、子エレメント上にポインターを動かすと pointerout が発生します。
pointerleave ( onpointerleave )イベントは、ポインターデバイスのためのイベントです。
ポインターデバイスとは、マウス、タッチデバイス、ペンといったポインターに関する入力デバイスのことです。
ページ内 Index
座標の取得
座標の取得には以下の4つの方法があります。
座標の基準 | プロパティ名 |
---|---|
スクリーンデバイスの左上端 | event.screenX、event.screenY |
ブラウザの表示エリアの左上端 | event.clientX、event.clientY |
ドキュメントの左上端 | event.pageX、event.pageY |
エレメントの左上端 | event.offsetX、event.offsetY |
構文(Syntax)
HTMLPreElement にイベントハンドラーを定義する方法には以下があります。
in HTML
<tagelement onpointerleave ="function(); ...;">
in JavaScript
object.onpointerleave = function(){... };
addEventListener()
関数の呼び出し。関数名のみ使用で、event 以外の引数が渡せない。
object.addEventListener("pointerleave ", function_name);
スクリプトを直接記述する方法。スクリプトから関数を呼び出せる。
object.addEventListener("pointerleave ", ()=>{ ... },false); // または object.addEventListener("pointerleave ",function(){ ... },false);
イベントについてはEventを参照してください。 イベントの監視についてはEventTargetが担っています。
備考(Remarks)
Bubbles | No |
Cancelable | No |
Interface | Event |
Supported HTML Elements | 全般 |
Example
pointerleave ( onpointerleave )イベントの例です。
pointerleave イベントではポインターが領域外に出るとイベントが発生します。バブリング機能がないために、子エレメント上はエレメントの領域内とみなされます。
似たイベントに pointerout があります。バブリング機能があり、このイベントは子エレメントをエレメントの領域に含みませんので、子エレメント上にポインターを動かすと pointerout が発生します。
ポインターに関連するイベント
以下はポインターに関連するイベントです。
イベント | 概要 |
---|---|
ongotpointercapture | ポインターイベントのキャプチャー対象に設定されたら |
onlostpointercapture | ポインターイベントのキャプチャー対象から外れたら |
onpointercancel | ポインターによるイベントが発生しないとなったとき |
onpointerdown | ポインターは押されたら |
onpointerenter | ポインターが領域上に入ったら |
onpointerleave | ポインターが領域上から離れたら |
onpointermove | ポインターが移動したら |
onpointerout | ポインターが反応条件から離れたら |
onpointerover | ポインターが領域内に入ったら |
onpointerup | ポインターがアクティブでなくなったら |