clientX/clientY 與 screenX/screenY 的區別
阿新 • • 發佈：2019-01-08
clientX/clientY 與 screenX/screenY 的區別
在JavaScript當中有時候我們需要獲取滑鼠懸停的位置，以此來做一些特殊處理。這時候就需要用到MouseEvent物件。MouseEvent物件提供了兩組屬性來定位滑鼠的位置：clientX/clientY和screenX/screenY。除了這兩組屬性我們經常還會用到pageX/pageY和offsetX/offsetY這兩組屬性也是用來定位滑鼠的，那麼他們究竟有什麼異同呢。
屬性說明
clientX/clientY
名稱 說明 返回 clientX 返回事件觸發時滑鼠相對於元素視口 的X座標 數值 clientY 返回事件觸發時滑鼠相對於元素視口 的Y座標 數值 這裡的元素視口實際上代指就是瀏覽器，clientX是滑鼠距離瀏覽器左邊框的距離，clientY是滑鼠距離瀏覽器上邊框的距離。
screenX/screenY
名稱 說明 返回 screenX 返回事件觸發時滑鼠相對於螢幕 的X座標 數值 screenY 返回事件觸發時滑鼠相對於螢幕 的Y座標 數值 顧名思義，screenX是滑鼠距離顯示器螢幕左邊框的距離，screenY是滑鼠距離顯示器螢幕上邊框的距離。
pageX/pageY
名稱 說明 返回 pageX 返回事件觸發時滑鼠相對於文件 的X座標 數值 pageY 返回事件觸發時滑鼠相對於文件 的Y座標 數值 所謂文件可以簡單的理解為瀏覽器中的頁面內容，pageX是滑鼠距離文件左側的距離，pageY是滑鼠距離文件上側的距離，如果我們將滑鼠懸停在瀏覽器中間，通過滾輪滾動瀏覽器，那麼儘管沒有移動滑鼠的位置而pageY一直在變化，因為相對文件頂部的距離一直在變化。
offsetX/offsetY
名稱 說明 返回 offsetX 返回事件觸發時滑鼠相對於事件指向元素 的X座標 數值 offsetY 返回事件觸發時滑鼠相對於事件指向元素 的Y座標 數值 假設有一個元素
<p>test</p>當滑鼠進入元素中觸發事件時這是offsetX指的就是滑鼠到P元素左邊的距離。但是這個屬性並不是標準屬性，因此IE和chrome對這個屬性的支援並不一樣。在chrome中offsetX和offsetY的值均為整數，而在IE中值為小數形式，並且如果元素有border屬性也會影響到offsetY的計算。
示例程式碼
mouseover.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link type="text/css" href="../css/test.css" rel="stylesheet">
<script src="../js/jquery-2.1.4.js"></script>
<script src="../js/eventtest.js"></script>
</head>
<body>
<div class="container">
<!--可以在這裡隨意新增一些內容，方便看出pageY和其他屬性的區別-->
<div class="section" >
</div>
<hr>
<div class="section" >
<h3>clientX 和 screenX</h3>
<div class="example">
<p id="position">
please move mouse into this area.<br />
clientX是到瀏覽器左側的距離，screenX是到顯示屏左側的距離。通過縮小瀏覽器的大小可以明顯看出變化
</p>
</div>
</div>
</div>
</body>
</html>test.css
div.container{
width:980px;
margin-left: auto;
margin-right: auto;
}
div.example{
height: 100px;
border:solid 1px #ccc;
background:#f8f8f8;
}
pre{
border:solid 1px #ccc;
background:#f8f8f8;
}
#banana{
font-family: FreeSerif;
font-size: 20px;
background: yellow;
}
#position{
border:solid 1px #ccc;
margin-left: 20px;
}
eventtest.js
/**
* Created by qiumingsheng on 2015/8/27.
*/
$(function(){
$('#position')[0].addEventListener("mousemove",handlePositionEvent);
$('#position')[0].addEventListener("mouseout",handlePositionEvent);
function handlePositionEvent(e){
if(e.type == 'mousemove'){
$(e.target).html("clientX:"+ e.clientX+" clientY:"+e.clientY
+"<br />"+"screenX:"+ e.screenX +" screenY:"+e.screenY
+"<br />"+"pageX:"+ e.pageX+" pageY:"+e.pageY
+"<br />"+"offsetX:"+ e.offsetX+" offsetY:"+e.offsetY);
}else{
$(e.target).text(" please move mouse into this area.");
}
};
});