[Web] マウスの動きをJavaScriptで取得した
今日は、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と組み合わせるとお絵描きで来ますね。楽しそう(・∀・)
