mousemove ( onmousemove )イベント
mousemove ( onmousemove )イベントは、設定されたHTMLエレメント上でマウスを動かしたら発生するイベントです。
このイベントは pointermove イベントで代替えできます。
document.getElementById('example').addEventListener("mousemove", (event)=>{ console.log( 'event type : ' + event.type ); });
ページ内 Index
座標の取得
座標の取得には以下の4つの方法があります。
座標の基準 | プロパティ名 |
---|---|
スクリーンデバイスの左上端 | event.screenX、event.screenY |
ブラウザの表示エリアの左上端 | event.clientX、event.clientY |
ドキュメントの左上端 | event.pageX、event.pageY |
エレメントの左上端 | event.offsetX、event.offsetY |
pointerenter (onpointerenter )イベントは、ポインターイベントの1つです。ポインターイベントは、マウス、タッチスクリーン、ペンといったポインターに関する入力デバイスのためのイベントです。
構文(Syntax)
in HTML
<tagelement onmousemove="function()">
in JavaScript
object.onmousemove = function(){ }; object.addEventListener("mousemove", script_);
備考(Remarks)
Bubbles | Yes |
Cancelable | Yes |
Interface | MouseEvent |
Supported HTML Elements | ALL HTML elements |
Example
mousemove ( onmousemove )イベントの例です。ポインターを「Example Element」領域内で動かすと座標が変化します。
座標のは、「Example Element」エレメントの左上端が基準として表示されます。
子エレメント「Child Element」でバブリング機能を停止しています。この mousemove にはバブリング機能があることが分かります。
イベントの詳細は開発用コンソールに表示されます。開発用コンソールで確認してみてください。