js获取鼠标在页面中的坐标简单介绍
本章节分享一段代码实例，它实现了获取鼠标在页面中坐标的功能。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
#coords{
width:500px;
height:200px;
background:#F2F1D7;
border:2px solid #0066cc;
}
#coord{
width:500px;
border:2px solid #336699;
}
</style>
</head>
<body>
<script type="text/javascript">
var getCoordInDocumentExample=function(){
var coords=document.getElementById("coords");
coords.onmousemove=function(e){
var pointer=getCoordInDocument(e);
var coord=document.getElementById("coord");
coord.innerHTML="X,Y=("+pointer.x+", "+pointer.y+")";
}
}
var getCoordInDocument=function(e){
var e=e||window.event;
var x=e.pageX||(e.clientX +
(document.documentElement.scrollLeft
|| document.body.scrollLeft));
var y= e.pageY || (e.clientY +
(document.documentElement.scrollTop
|| document.body.scrollTop));
return {'x':x,'y':y};
}
window.onload=function(){
getCoordInDocumentExample();
};
</script>
<div id="coords"></div>
<br />
<div id="coord"></div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.var getCoordInDocumentExample=function(){}，此函数实现相关操作。比如事件处理函数的注册等。
（2）.var coords=document.getElementById("coords")，获取id属性值为coords的元素对象。
（3）.coords.onmousemove=function(e){}，为元素注册onmousemove事件处理函数，函数的参数e是事件对象。
（4）.var pointer=getCoordInDocument(e),获取一个坐标对象。
（5）.var coord=document.getElementById("coord"),获取id属性值为coord的元素对象。
（6）.coord.innerHTML="X,Y=("+pointer.x+", "+pointer.y+")",将相应的坐标写入指定元素。
（7）.var getCoordInDocument=function(e){}，此函数能够返回一个坐标对象，函数的参数是一个事件对象。
（8）.var e=e||window.event,获取兼容所有浏览器的事件对象。
（9）.var x=e.pageX||(e.clientX +(document.documentElement.scrollLeft || document.body.scrollLeft))，这个y而是为了兼容问题，获取鼠标在页面文档中的坐标。
（10）.return {'x':x,'y':y},封装成一个对象，并返回。
二.相关阅读:
（1）.onmousemove事件可以参阅javascript mousemove事件一章节。
（2）.innerHTML属性可以参阅js innerHTML一章节。
（3）.var e=e||window.event可以参阅var ev=window.event||ev的作用是什么一章节。
（4）.clientX可以参阅javascript clientX一章节。
（5）.document.documentElement.scrollLeft || document.body.scrollLeft可以参阅document.documentElement.scrollTop浏览器兼容一章节。