忍者ブログ

16May

[PR]

Posted by in

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

10Jun

画面上のマウス座標を取得する

Posted by No Name Ninja in Javascript Sample

画面上のマウス座標を取得します。
『表示されている画面上での座標』は統一したロジックが可能ですが、『画面全体上の座標』の場合、クロスブラウザーが発生します。(I.E.)。座標取得はクロスブラザー問題まみれ。
SAMPLE
●解説

<script type="text/javascript">
/**
 * マウス移動時のイベントを取得する。
 */
document.onmousemove = function(e){
  var curPos = getCoordinate(e);
  document.getElementById('testId').innerHTML = 'X=' + curPos.curX + ' Y=' + curPos.curY;
}

/**
 * スクロールされた時にも画面上に表示されるようにしているだけ
 */
window.onscroll = function(e){
  var curEle = document.getElementById('testId');
  curEle.style.position = 'absolute';
  if(document.documentElement && document.documentElement.scrollLeft){
    curEle.style.left = parseInt(document.documentElement.scrollLeft)  + 'px';
    curEle.style.top = parseInt(document.documentElement.scrollTop)  + 'px';
  //Safari用
  }else if(document.body){
    curEle.style.left = parseInt(document.body.scrollLeft)  + 'px';
    curEle.style.top = parseInt(document.body.scrollTop)  + 'px';
  }
}

/**
 * マウス座標を取得します。
 * obj.curX マウス座標X
 * obj.curY マウス座標Y
 */
function getCoordinate(e){
  var evt = e || event;

  var curPos = new Object();
  //I.E.以外のブラウザ
  if(evt.pageX){
    curPos.curX = evt.pageX;
    curPos.curY = evt.pageY;
  //I.E.6以降の場合
  }else if(evt.clientX){
    curPos.curX = evt.clientX + document.documentElement.scrollLeft;
    curPos.curY = evt.clientY + document.documentElement.scrollTop;

  }
  return curPos;
}
</script>

『表示されている画面上での座標は』clientX、clientYで全ブラウザ取得可能です。
ただし『全画面上での座標』の場合、pageX,pageYで取得できますが、I.E.は未サポート。
I.E.は作成してあげなければならない。
『表示されている画面上での座標』に『スクロールされている座標』を加算すれば取得できるというわけです。

ちなみに
document.documentElement.scrollLeft;
document.documentElement.scrollTop;
これはsafariが未対応。以下のようにしなkればならない。
document.body.scrollLeft
document.body.scrollTop
I.E.5以前もこんな感じだったと思います。

以下のSAMPLEをいろんなブラウザで動かすとわかりやすいです。
SAMPLE

座標取得について表にしてみました。
SAMPLE

PR

Comment


Vodafone絵文字 i-mode絵文字 Ezweb絵文字

Trackback