マウスの座標を取得する

説明

マウスの座標値はイベントオブジェクトのx, yプロパティまたはpageX, pageYプロパティで取得することができます。Internet Explorerではx, yプロパティで座標値を取得できますが、ページがスクロールした場合にはページ上の座標値ではなくブラウザ上の座標値になってしまうため、ページ上の座標値を求める場合にはスクロール量を加算します。横方向のスクロール量はdocument.body.scrollLeft、縦方向のスクロール量はdocument.body.scrollTopとなります。
Internet Explorer以外のブラウザではイベントオブジェクトのpageX, pageYプロパティで座標値を読み出す事ができます。また、Safari 2の場合は読み出されるclientX, clientY座標値が他ブラウザと異なるので注意が必要です。
JavaScriptテクニック ブック 　詳しい解説などはJavaScriptテクニック ブックを参照してください。

サンプルコード [実行]

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>JavaScript Sample</title>
<link rel="stylesheet" type="text/css" href="main.css" media="all">
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<h1>マウスの座標を取得する</h1>
<div id="result">---</div>
</body>
</html>
window.onload = function(){
window.document.onmousemove = function(evt){
if (evt){
var x = evt.pageX;
var y = evt.pageY;
}else{
var x = event.x + document.body.scrollLeft;
var y = event.y + document.body.scrollTop;
}
document.getElementById("result").innerHTML = x+","+y;
}
}