YoheiM技術やらずに終われまテン

2011-07-22 [JavaScript]マウスの動きをJavaScriptで取得した

こんにちは、@yoheiMuneです。

今日は、Web画面上のマウスの動きを、JavaScriptで取得する方法をブログに残したいと思います。

マウスの動きをどのように取得するのか、どんな値が取得出来るのかを知りたくて調べました。思ったより情報をGETできて良かった♪(´ε` )

f:id:yoheiM:20110722142112j:image




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

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

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

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

f:id:yoheiM:20110722142113p:image

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.offsetXevent.targetのElement左上からの座標のX軸の値
event.offsetYevent.targetのElement左上からの座標のX軸の値
event.targetイベントが発生した最初の要素。DIVとかH1とか

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




最後に

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

運営しているサイトです。どうぞよろしくお願いします(*´∇`*)

Facebook

HTML5LearnersHTML5を学び合うFacebookPage

HTML5サンプルページ:作成したサンプルを載せているサイト

YoheiM.NET:技術情報を中心に情報発信サイト

cooking_bot:料理情報をつぶやくTwitterアカウント

Connection: close