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浏览器兼容一章节。

js获取鼠标在页面中的坐标简单介绍

回复

我来回复
  • 暂无回复内容