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