JavaScript--获取页面盒子中鼠标相对于盒子上、左边框的坐标

时间:2019-01-10 16:35:29 来源:互联网 作者: 神秘的大神 字体:

分析:

外层边框是浏览器边框,内部盒子是页面的一个盒子,绿点是盒子中鼠标的位置。鼠标相对盒子边框的坐标=页面中(注意不是浏览器)鼠标坐标-盒子相对于浏览器边框的偏移量

 

 

第一步:求浏览器边框位置

x=element.offsetLeft;

y=element.offsetTop;

代码如下:

 1 /*************样式表********************/  2 <style>  3             *{  4                 padding: 0px;  5                 margin: 0px;  6             }  7             body {  8                 height: 2000px;  9             } 10             #box{ 11                 border: 1px solid black; 12                 margin: 100px; 13                 width: 400px; 14                 height: 400px; 15             } 16 </style> 17  18  19 /*************网页主体********************/ 20 <body> 21         <div id="box"></div> 22                 /*************JS代码********************/ 23         <script> 24             //获取盒子边框相当于浏览器边框的距离 25             var box=document.getElementById('box'); 26             var x=box.offsetLeft; 27             var y=box.offsetTop; 28             console.log(x); 29             console.log(y); 30         </script> 31 </body>

 

 

 

第二步:求鼠标在页面中的位置

鼠标在页面中的位置:

e.PageX  e.PageY ---------->鼠标在整个文档中的位置

e.ClientX  e.ClientY --------->鼠标在整个浏览器中的位置

上面二者的区别在于文档中有没有滚动条,如果有滚动条,则两个不一样,没有滚动条的情况下,二者没有区别。在本文要求中,需要使用e.PageX  e.PageY

不过,e.PageX  e.PageY有浏览器兼容性问题,从IE9以后才支持。

e.PageX=e.ClientX+滚动条滚动距离

e.PageY=e.ClientY+滚动条滚动距离

滚动条滚动距离也具有浏览器兼容问题,浏览器兼容问题解决如下:

2.1 滚动条的滚动距离的兼容问题

一般求滚动条滚动距离有两种方式,如下:

第一种:

scroll_x=document.body.scrollLeft

scroll_y=document.body.scrollTop

第二种:

scroll_x=document.documentElement.scrollLeft;

scroll_y=document.documentElement.scrollTop;

但是发现使用第一种方式,获得的滚动条滚动距离一直是0。

查资料发现是DTD的问题。

页面指定了DTD,即指定了DOCTYPE时,使用document.documentElement.scrollTop。

页面没有DTD,即没指定DOCTYPE时,使用document.body.scrollTop。
当然,针对上述问题,本文做了如下调整:

//滚动条滚动距离
var scroll_x=document.body.scrollLeft || document.documentElement.scrollLeft;
var scroll_y=document.body.scrollTop || document.documentElement.scrollTop;

2.2e.PageX  e.PageY有浏览器兼容性问题

var page_x=e.pageX || e.clientX + scroll_x;
var page_y=e.pageY || e.clientY + scroll_y;

第二步和第一步做差,即能得到获取页面盒子中鼠标相对于盒子上、左边框的坐标

具体代码如下:

 1 <!DOCTYPE html>  2 <html lang="en">  3     <head>  4         <meta charset="UTF-8">  5         <title>Document</title>  6         <style>  7             *{  8                 padding: 0px;  9                 margin: 0px; 10             } 11             body { 12                 height: 2000px; 13             } 14             #box{ 15                 border: 1px solid black; 16                 margin: 100px; 17                 width: 400px; 18                 height: 400px; 19             } 20         </style> 21     </head> 22  23     <body> 24         <div id="box"></div> 25         <script> 26             //获取盒子边框相当于浏览器边框的距离 27             var box=document.getElementById('box'); 28             var box_x=box.offsetLeft; 29             var box_y=box.offsetTop; 30          31          //滚动条滚动距离 32          var scroll_x=document.body.scrollLeft || document.documentElement.scrollLeft; 33          var scroll_y=document.body.scrollTop || document.documentElement.scrollTop; 34           35           36           37           38          //鼠标点击事件 39          document.onclick=function(e){ 40              //e.pageX  e.pageY坐标 41              var page_x=e.pageX || e.clientX + scroll_x; 42              var page_y=e.pageY || e.clientY + scroll_y; 43              //相对坐标 44              var x=page_x - box_x; 45              var y=page_y - box_y; 46              console.log(x); 47              console.log(y); 48          } 49         </script> 50     </body> 51 </html>