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