備忘録的プログラミングリファレンス

pointerleave ( onpointerleave )イベント

 pointerleave ( onpointerleave )イベントは、ポインターがエレメントの領域から離れたら発生するイベントです。 バブリング機能がないために、子エレメント上も親エレメン卜の領域内とみなされます。
 タッチデバイスでは、一度領域上にポインターがあると判断されてから、別の場所にポインターが移動したと判断されたら発生します。

pointerleave イベントを追加( onpointerleave イベントハンドラーとして追加)
document.getElementById('example').addEventListener("pointerleave", (event)=>{
	console.log( 'event type : ' + event.type );
});

詳しくは Example を参照してください

 似たイベントに pointerout があります。このイベントは子エレメントをエレメントの領域に含みませんので、子エレメント上にポインターを動かすと pointerout が発生します。

 pointerleave ( onpointerleave )イベントは、ポインターデバイスのためのイベントです。
 ポインターデバイスとは、マウス、タッチデバイス、ペンといったポインターに関する入力デバイスのことです。

ページ内 Index

座標の取得

 座標の取得には以下の4つの方法があります。

座標の基準プロパティ名
スクリーンデバイスの左上端event.screenXevent.screenY
ブラウザの表示エリアの左上端event.clientXevent.clientY
ドキュメントの左上端event.pageXevent.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)

BubblesNo
CancelableNo
InterfaceEvent
Supported HTML Elements全般

Example

 pointerleave ( onpointerleave )イベントの例です。

 pointerleave イベントではポインターが領域外に出るとイベントが発生します。バブリング機能がないために、子エレメント上はエレメントの領域内とみなされます。

 似たイベントに pointerout があります。バブリング機能があり、このイベントは子エレメントをエレメントの領域に含みませんので、子エレメント上にポインターを動かすと pointerout が発生します。

確認ボタンをクリックしてください。以下のHTML,CSS,Scriptコード例が実行されます。

ポインターに関連するイベント

 以下はポインターに関連するイベントです。

イベント概要
ongotpointercaptureポインターイベントのキャプチャー対象に設定されたら
onlostpointercaptureポインターイベントのキャプチャー対象から外れたら
onpointercancelポインターによるイベントが発生しないとなったとき
onpointerdownポインターは押されたら
onpointerenterポインターが領域上に入ったら
onpointerleaveポインターが領域上から離れたら
onpointermoveポインターが移動したら
onpointeroutポインターが反応条件から離れたら
onpointeroverポインターが領域内に入ったら
onpointerupポインターがアクティブでなくなったら