2012/04/07更新

[Web] JavaScriptでマウス座標やスクロール量を取得する

今日は、JavaScriptでマウスの位置や、ウインドウサイズ、スクロール量を取得するスクリプトを作成しました。
HTML5のCanvasとかでマウス座標を扱う時に、参考になればと思い、纏めてみました。

http://www.yoheim.net/labo/tips/getSeveralValue.html

機能の説明

上記の画面では、以下の値を取得できます。マルチブラウザの対応もしてます。

Window左上からのマウスの座標を取得する
特定要素内での左上からのマウスの座標を取得する
画面のスクロール量を取得する
画面サイズを取得する

マウスを動かしたり、スクロールしたり、ウインドウサイズを変えると、画面上のそれぞれの数値が変わります。

JavaScriptソースコード

今回作成した目的は、上記の機能を利用する事が時々あって、その度に調べたりするのが面倒！！ということで、スニペットとして残したかったので、作成しました。
ここでもJavaScriptソースコードを公開しておきます(｀・ω・´)
ご参考になれば幸いです。

window.addEventListener("load", function () {
   
 // Window上のマウス座標を取得する
 window.onmousemove = function (e) {
   var mouseX, mouseY;
    // マルチブラウザ対応のため、引数eventが指定されないブラウザは、
    // グローバルなeventオブジェクトを利用する。
    if (e) {
     mouseX = e.pageX;
     mouseY = e.pageY;
    } else {
     mouseX = event.pageX
       + document.body.scrollLeft;
     mouseY = event.pageY
       + document.body.scrollTop;
    }
  // 取得した値を表示する
  document.getElementById("mouseX").value = mouseX;
  document.getElementById("mouseY").value = mouseY;
 }

 // ページスクロール量を取得する
 window.onscroll = function () {
  // マルチブラウザ対応のため、
  // ２種類のプロパティから設定されている値を取得する
  var scrollX
     = document.documentElement.scrollLeft
       || document.body.scrollLeft;
  var scrollY
     = document.documentElement.scrollTop
       || document.body.scrollTop;
  // 取得した値を画面に表示する
  document.getElementById("scrollX").value = scrollX;
  document.getElementById("scrollY").value = scrollY;
 }
   
 // 特定のDIV要素内でのマウス位置を取得する
 document.getElementById("targetDiv").onmousemove
    = function (e) {
  var mouseX, mouseY, offsetX=0, offsetY=0;
  var element = this;
 
  // まずは、対象DIV要素が
  // 画面上のどの位置にあるかを取得する
  while (element) {
   offsetX += element.offsetLeft;
   offsetY += element.offsetTop;
   element = element.offsetParent;
  }
   
  // DIV位置を考慮して、
  // X,Y座標を計算する
  if (e) {
   mouseX = e.pageX - offsetX;
   mouseY = e.pageY - offsetY;
  } else {
   mouseX = event.pageX
     + document.body.scrollLeft - offsetX;
   mouseY = event.pageY
     + document.body.scrollTop  - offsetY;
  }
  // 取得した値を表示する
  document.getElementById("divMouseX").value = mouseX;
  document.getElementById("divMouseY").value = mouseY;
 }
   
 // Windowサイズを取得する
 // 画面表示時に取得するのと、
 // 画面サイズが変わった時に、ウインドウサイズを再取得する
 document.getElementById("windowW").value
     = window.innerWidth;
 document.getElementById("windowH").value
     = window.innerHeight;
 
 window.onresize = function (e) {
  var w = window.innerWidth;
  var h = window.innerHeight;
  document.getElementById("windowW").value = w;
  document.getElementById("windowH").value = h;
 }
}

最後に

JavaScriptのスニペットが色々とあってすぐに参照出来ると、実装も速くなって良いですね（覚えていれば一番良いと思いますが）。
また便利なスニペットがあったら、ブログにも書きたいと思います。
最後まで読んで頂きましてありがとうございました(*ﾟ▽ﾟ)ﾉ