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

lostpointercapture ( onlostpointercapture )イベント

 lostpointercapture ( onlostpointercapture )イベントは、ポインターをイベントの追従(キャプチャー)から開放する Element.releasePointerCapture() メソッドが実行されたら発生するイベントです。
 Element.setPointerCapture() メソッドによってポインターの指定エレメントの追従を、 Element.releasePointerCapture() によって開放します。

lostpointercapture イベントを追加( onlostpointercapture イベントハンドラーとして追加)
document.getElementById('example').addEventListener("lostpointercapture", (event)=>{
	console.log( 'event type : ' + event.type );
});
詳しくは Example を参照してください

 Element.releasePointerCapture() メソッドの対は Element.setPointerCapture() メソッドです。 Element.setPointerCapture() メソッドによってキャプチャーの対象になります。

 エレメントがキャプチャーの対象になっているかは、Element.hasPointerCapture() メソッドで確認ができます。

座標の取得

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

座標の基準プロパティ名
スクリーンデバイスの左上端event.screenX、event.screenY
ブラウザの表示エリアの左上端event.clientX、event.clientY
ドキュメントの左上端event.pageX、event.pageY
エレメントの左上端event.offsetX、event.offsetY

ページ内 Index

構文(Syntax)

 HTMLPreElement にイベントハンドラーを定義する方法には以下があります。

in HTML

<tagelement onlostpointercapture ="function(); ...;">

in JavaScript

object.onlostpointercapture  = function(){... };

addEventListener()

 関数の呼び出し。関数名のみ使用で、event 以外の引数が渡せない。

object.addEventListener("lostpointercapture ", function_name);

 スクリプトを直接記述する方法。スクリプトから関数を呼び出せる。

object.addEventListener("lostpointercapture ", ()=>{ ... },false);
// または
object.addEventListener("lostpointercapture ",function(){ ... },false);

 イベントについてはEventを参照してください。 イベントの監視についてはEventTargetが担っています。

備考(Remarks)

BubblesNo
CancelableNo
InterfaceEvent
Supported HTML Elements全般

Example

 lostpointercapture ( onlostpointercapture )イベントの例です。「確認」ボタンをクリックしてください。

 「Child Element」をドラッグしてください。このエレメントは横にのみスライドします。
 ドラッグしている間はポインターがエレメントから外れても、そのままポインターは「Child Element」を追従します。Element.setPointerCapture() によってポインターが指定エレメントを追従(キャプチャー)しているためです。
 ドラッグを止めると、Element.releasePointerCapture() メソッドによってポインターが開放されます。

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

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

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

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