JS之clientX,clientY,screenX,screenY,offsetX,offsetY區別測試
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是滑鼠事件物件下的幾個屬性.
之前也一直對這些屬性搞的稀裡糊塗,看文件上說的也是不太理解,反正看完一頭霧水,所以自己動手親自測試了一下;說一下自己的理解;clientX,clientY,screenX,screenY,offsetX,offsetY 這幾個屬性是“滑鼠事件物件”下的屬性,所以必然是“滑鼠事件”發生時候才會有意義;
clientX:當滑鼠事件發生時(不管是onclick,還是omousemove,onmouseover等),滑鼠相對於瀏覽器(這裡說的是瀏覽器的有效區域)x軸的位置; clientY:當滑鼠事件發生時,滑鼠相對於瀏覽器(這裡說的是瀏覽器的有效區域)y軸的位置; screenX:當滑鼠事件發生時,滑鼠相對於顯示器螢幕x軸的位置; screenY:當滑鼠事件發生時,滑鼠相對於顯示器螢幕y軸的位置; offsetX:當滑鼠事件發生時,滑鼠相對於事件源x軸的位置 offsetY:當滑鼠事件發生時,滑鼠相對於事件源y軸的位置
下面我將結合我的測試程式碼和結果對上面的話進行解釋
這是我寫的測試例子的html程式碼
<body> <span style="white-space:pre"> </span><div id="div" class="container"></div> <span style="white-space:pre"> </span><!--<div id="div1" class="container"></div> <span style="white-space:pre"> </span><input type="button" value="test" onclick="test();">--> </body>
新增一點樣式
<style> *{padding: 0;margin: 0;} .container{ width: 200px;height: 100px; border: 1px solid #c00; } input[type="button"]{ margin: 50px; border: none; width: 100px;height: 50px;background: green; } </style>
接下來是js部分的程式碼
<script>
document.onmousemove = function (ev) {
var e = ev || window.event;
var div = document.getElementById('div');
div.innerHTML = "clientX: "+e.clientX + ",clientY:"+ e.clientY +
"</br> screenX:"+ e.screenX+",screenY:" + e.screenY;
}
/* function test(ev) {
var e = ev || window.event;
var div1 = document.getElementById('div1');
div1.innerHTML = "offsetX:"+ e.offsetX +",offsetY : "+ e.offsetY;
}*/
</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座標