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