画面上のマウス座標を取得します。
『表示されている画面上での座標』は統一したロジックが可能ですが、『画面全体上の座標』の場合、クロスブラウザーが発生します。(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