实例
<!DOCTYPE html>
<html>
<head>
<title>光标的位置坐标</title>
<meta charset="utf-8">
<style type="text/css">
*{margin:0;padding:0;}
.main{
width:500px;
height:500px;
margin:20px auto;
border:1px solid #ccc;
}
p{
margin:0 auto;
width: 500px;
border:1px solid #ccc;
height: 30px;
line-height: 30px;
padding-left:10px;
}
</style>
</head>
<body>
<div class="main"></div>
<p>坐标为<b id="show"></b></p>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementsByClassName('main')[0];
var oid=document.getElementById('show');
odiv.onmousemove=function(event){
var e=event || window.event;
var m_x=e.clientX;//光标相对于文档的x轴坐标
var m_y=e.clientY;//光标相对于文档的y轴坐标
var d_x=this.offsetLeft;//div元素相对于文档x轴坐标
var d_y=this.offsetTop;//div元素相对于文档y轴坐标
var mx=e.offsetX;//光标相对于元素div的x轴坐标
var my=e.offsetY;//光标相对于元素div的y轴坐标
//即.mx=m_x-d_x,my=m_y-d_y
//注释：元素相对于文档的位置，是指元素左上方顶点的位置！！！
oid.innerHTML='('+m_x+' '+m_y+')'+' '+'('+mx+' '+my+')'+' '+'('+d_x+' '+d_y+')';
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例