マウスの座標を取得する

webページ上でマウスを使ってオブジェクトをドラッグしたり、ツールチップを表示する場合など、ドラッグする位置やツールチップを表示する位置を求めるためにマウスの座標を利用する

<script type="text/javascript">
    //イベントハンドラでは発生したイベントの情報がイベントオブジェクトとして自動的に渡される。
    //無名関数の引数に記述することで無名関数の中で利用可能なイベントオブジェクトを取得することが出来る
    document.onmousemove = function(evt){
        var position = getMousePosition(evt);

        document.getElementById("mouse-x").innerHTML = position.x;
        document.getElementById("mouse-y").innerHTML = position.y;
    }
</script>

function getMousePosition(evt){
    var position;

    if(evt){
        position = {
            x: evt.pageX,
            y: evt.pageY
        }
    }else{ //ieの場合
        evt = window.event;
        position = {
            x: evt.x + document.body.scrollLeft,
            y: evt.y + document.body.scrollTop
        }
    }
    return position;
}