你的位置:首页 > Java教程

[Java教程]javascript获取鼠标在网页文档中的坐标


javascript获取鼠标在网页文档中的坐标:
获取鼠标在网页中的坐标是常用的操作,本章节就通过一个简单的代码实例介绍一下如何实现此功能。
代码如下:

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>获取鼠标在文档中的坐标-蚂蚁部落</title><style type="text/css">#zuobiao{ width:200px; height:200px; background-color:#CCC; text-align:center;}</style><script type="text/javascript"> var xPos; var yPos; function mouseCoords(ev){  if(ev.pageX||ev.pageY){   return {x:ev.pageX,y:ev.pageY};  }  else{  return {   x:ev.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,   y:ev.clientY+document.body.scrollTop+document.documentElement.scrollTop   }  }} window.onload=function(){ var zuobiao=document.getElementById("zuobiao"); document.onmousemove=mouseMove;  function mouseMove(ev){   ev= ev||window.event;   var mousePos=mouseCoords(ev);   xPos=mousePos.x;   yPos=mousePos.y;   zuobiao.innerHTML="X坐标:"+xPos+"<br/>"+"Y坐标:"+yPos; } }</script></head><body><div id="zuobiao"></div></body></html>

以上代码实现了我们的要求,当鼠标在网页中移动的时候,能够在div中实时显示鼠标指针在网页文档中的坐标,下面就简单介绍一下此效果的实现过程。
一.实现原理:
原理比较简单,那就是为document对象注册onmousemove事件处理函数,当鼠标在文档中移动的时候,获取鼠标在网页文档中的坐标,在代码中使用了兼容性的写法,pageX和pageY属性能够直接获取鼠标在网页文档中的坐标,但是这两个属性具有浏览器兼容性问题,所以当浏览器不支持这两个属性的时候就利用clientX和clientY来获取,但是这两个属性获取的是鼠标在网页客户可见区域的坐标,并不包括滚动条隐藏的部分,所以必须要和滚动隐藏的尺寸相加才行。
二.代码注释:
1.var xPos,var yPos,声明两个变量用于存储鼠标指针在网页文档的坐标。
2.function mouseCoords(ev) {},此函数可以获取鼠标指针在网页文档的坐标,参数是事件对象。
3.if(ev.pageX||ev.pageY) ,判断浏览器是否支持pageX和pageY属性。
4.return {x:ev.pageX,y:ev.pageY},返回一个对象直接量,属性即为坐标。
5.return {
   x:ev.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
   y:ev.clientY+document.body.scrollTop+document.documentElement.scrollTop 
}
如果浏览器不支持pageX和pageY属性,就是使用clientX和clientY属性再加上滚动的尺寸。
6.window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
7.var zuobiao=document.getElementById("zuobiao"),获取id属性值为zuobiao的对象。
8.document.onmousemove=mouseMove,为document注册事件处理函数。
9.function mouseMove(ev){},onmousemove事件处理函数,ev为事件对象。
10.ev= ev||window.event,为了兼容火狐和其他浏览器。
11.var mousePos=mouseCoords(ev),调用mouseCoords函数。
12. xPos=mousePos.x和yPos=mousePos.y返回x和y坐标。
13.zuobiao.innerHTML="X坐标:"+xPos+"<br/>"+"Y坐标:"+yPos,将坐标写入div。
三.相关阅读:
1.clientX和clientY属性可以参阅javascript的clientX事件属性一章节。
2.document.body.scrollLeft可以参阅document.documentElement.scrollTop浏览器兼容一章节。
3.onmousemove事件可以参阅javascript的onmousemove事件一章节。
4.ev= ev||window.event可以参阅var ev=window.event||ev的作用是什么一章节。 

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8827

更多内容可以参阅:http://www.softwhy.com/javascript/