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