JS之clientX,clientY,screenX,screenY,offsetX,offsetY區別測試

時間  2019-12-14
標籤 clientx clienty screenx screeny offsetx offsety 區別 測試 欄目 JavaScript 简体版
原文   原文鏈接

首先須要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠標事件對象下的幾個屬性.javascript

以前也一直對這些屬性搞的稀裏糊塗，看文檔上說的也是不太理解，反正看完一頭霧水，因此本身動手親自測試了一下；說一下本身的理解；clientX,clientY,screenX,screenY,offsetX,offsetY 這幾個屬性是「鼠標事件對象」下的屬性，因此必然是「鼠標事件」發生時候纔會有意義；css

 

[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

這是我寫的測試例子的html代碼java

 

[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>  



 

這裏我須要解釋一下我上面說的「瀏覽器有效區域」這句話，下圖中黑色邊框區域就是瀏覽器的有效區域，而整個圖片顯示的區域就是 「顯示器屏幕區域」spa

 

下圖能夠看到當鼠標移動事件onmousemove發生的時候，在id爲div的裏面顯示clientX,clientY,screenX,screenY,的值；.net

 

當個人鼠標放到瀏覽器有效區域的 0 ，0 處，clientX爲0，clientY爲0；htm

而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座標

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程