JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试

首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性.

之前也一直对这些属性搞的稀里糊涂，看文档上说的也是不太理解，反正看完一头雾水，所以自己动手亲自测试了一下；说一下自己的理解；clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性，所以必然是“鼠标事件”发生时候才会有意义；

 

[plain] view plain copy
 
  1. clientX：当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置；  
  2. clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置；  
  3. screenX：当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；  
  4. screenY：当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；  
  5. offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置  
  6. offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置  

 

 

下面我将结合我的测试代码和结果对上面的话进行解释

这是我写的测试例子的html代码

 

[plain] view plain copy
 
  1. <body>  
  2. <span style="white-space:pre">    </span><div id="div" class="container"></div>  
  3. <span style="white-space:pre">    </span><!--<div id="div1" class="container"></div>  
  4. <span style="white-space:pre">    </span><input type="button" value="test" onclick="test();">-->  
  5. </body>  

 

 

添加一点样式

 

[css] view plain copy
 
  1. <style>  
  2.         *{padding: 0;margin: 0;}  
  3.         .container{  
  4.             width: 200px;height: 100px;  
  5.             border: 1px solid #c00;  
  6.         }  
  7.         input[type="button"]{  
  8.             margin: 50px;  
  9.             border: none;  
  10.             width: 100px;height: 50px;background: green;  
  11.         }  
  12. </style>  



 

接下来是js部分的代码

 

[javascript] view plain copy
 
  1. <script>  
  2.         document.onmousemove = function (ev) {  
  3.             var e = ev || window.event;  
  4.             var div = document.getElementById('div');  
  5.             div.innerHTML = "clientX: "+e.clientX + ",clientY:"+ e.clientY +  
  6.                         "</br> screenX:"+ e.screenX+",screenY:" + e.screenY;  
  7.         }  
  8.    
  9.       /*  function test(ev) { 
  10.             var e = ev || window.event; 
  11.             var div1 = document.getElementById('div1'); 
  12.             div1.innerHTML = "offsetX:"+ e.offsetX +",offsetY : "+ e.offsetY; 
  13.         }*/  
  14. </script>  



 

这里我需要解释一下我上面说的“浏览器有效区域”这句话，下图中黑色边框区域就是浏览器的有效区域，而整个图片显示的区域就是 “显示器屏幕区域”

 

下图可以看到当鼠标移动事件onmousemove发生的时候，在id为div的里面显示clientX,clientY,screenX,screenY,的值；

 

当我的鼠标放到浏览器有效区域的 0 ，0 处，clientX为0，clientY为0；

而screenX为0，screenY为85，因为鼠标在“浏览器有效区域”里的x坐标就是0，y坐标也是0，而鼠标在“显示器屏幕区域”的x坐标是0，y坐标是85px

 

当我把鼠标移到div的右上角的时候，clientX为200，clientY为0；

screenX为200，screenY为85，由此可知道

clientX是鼠标相对以浏览器有效区域的的X轴坐标，

clientY是鼠标相对以浏览器有效区域的的Y轴坐标，

上图中我的鼠标在浏览器有效区域里 的x坐标是200px，y坐标是0；而screenX，screenY则是相对以整个显示屏幕区域而言的。

上图中 相对于“整个显示屏幕区域而言” 鼠标的x坐标是200px，y坐标是85px，所以screenX和screenY正是获取这两个值，所以screenX是200px，screenY是85px

 

 

 

当我的鼠标移动到div的右下角的时候，screeX是200px，screenY是185px，因为div本身的宽度我定义的时200px，高度100px；

 

接下来说一说offsetX和offsetY属性

offsetX ：当鼠标事件发生时，鼠标相对于事件源x轴的位置

offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置

 

当我们点击test按钮的时候触发onclick事件，这里test这个按钮就是事件源，所以通过offsetX和offsetY获取的坐标值就是相对于 test按钮这个事件源的；

Test按钮自身的宽100px高50px；为了容易理解，我特意给按钮添加个margin：50px让大家看得效果明显一些；

 

 

 

第一次鼠标是在接近test按钮的左上角点击

 

 

相信看到这里应该能明白offsetX和offsetY是获取的什么值了吧，获取的就是鼠标相对test这个按钮的x坐标和y坐标

posted @ 2017-07-19 14:53  张洪源  阅读(394)  评论(0)  编辑  收藏  举报