mousemove ( onmousemove )イベント
mousemove ( onmousemove )イベントは、設定されたHTMLエレメント上でマウスを動かしたら発生するイベントです。
このイベントは pointermove イベントで代替えできます。
document.getElementById('example').addEventListener("mousemove", (event)=>{
console.log( 'event type : ' + event.type );
});
ページ内 Index
座標の取得
座標の取得には以下の４つの方法があります。
| 座標の基準 | プロパティ名 |
|---|---|
| スクリーンデバイスの左上端 | event.screenX、event.screenY |
| ブラウザの表示エリアの左上端 | event.clientX、event.clientY |
| ドキュメントの左上端 | event.pageX、event.pageY |
| エレメントの左上端 | event.offsetX、event.offsetY |
pointerenter (onpointerenter )イベントは、ポインターイベントの１つです。ポインターイベントは、マウス、タッチスクリーン、ペンといったポインターに関する入力デバイスのためのイベントです。
構文（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 にはバブリング機能があることが分かります。
イベントの詳細は開発用コンソールに表示されます。開発用コンソールで確認してみてください。