マウスの動きをJavaScriptで取得した

こんにちは、@yoheiMuneです。
今日は、Web画面上のマウスの動きを、JavaScriptで取得する方法をブログに残したいと思います。
マウスの動きをどのように取得するのか、どんな値が取得出来るのかを知りたくて調べました。思ったより情報をGETできて良かった♪(´ε｀ )

マウスの動きを追うためのイベント

マウスの動きを追うためには、以下3つのイベントを利用しました。

onmousedown	マウスがクリックされた時のイベント
onmousemove	マウスが移動した時のイベント
onmouseup	マウスクリックが終了した時のイベント

以下のような画面を作成し、マウスの動作を画面上に表示しています。

http://www.yoheim.net/labo/tips/mouse.php

マウスの動きを追う実装

以下のような処理を作成して、マウスイベントに設定しました。

function showInfo(event){
  var info  = "type=" + event.type;
  info += " xy=" + event.x + "," + event.y;
  info += " offsetXY="+ event.offsetX + "," + event.offsetY;
  info += " target=" + event.target.nodeName;
  area.innerHTML = area.innerHTML + info + "<br>\n";
  area.scrollTop = area.scrollHeight;
}

window.addEventListener("load", function(){
  document.body.onmousedown = showInfo;
  document.body.onmousemove = showInfo;
  document.body.onmouseup   = showInfo;
}, false);

マウスのイベント時に引数で受け取れるeventには以下のような情報が格納されています。

event.type	イベントタイプ。mousedownやmousemoveなど
event.x	ブラウザ左上からの絶対座標のX軸の値
event.y	ブラウザ左上からの絶対座標のY軸の値
event.offsetX	event.targetのElement左上からの座標のX軸の値
event.offsetY	event.targetのElement左上からの座標のX軸の値
event.target	イベントが発生した最初の要素。DIVとかH1とか

今回は、マウスイベントをdocument.bodyに設定しているので、画面上の全てのマウス操作を取得しています。

最後に

マウスの位置を把握して、なんらかの動きを行う。Canvasと組み合わせるとお絵描きで来ますね。楽しそう(・∀・)

運営しているサイトです。どうぞよろしくお願いします(*´∇｀*)
Facebook
HTML5Learners：HTML5を学び合うFacebookPage
HTML5サンプルページ：作成したサンプルを載せているサイト
YoheiM.NET：技術情報を中心に情報発信サイト
cooking_bot：料理情報をつぶやくTwitterアカウント