在前面的幾篇文章中，我們討論過offset、client和scroll。
JS offset系列簡明教程
JS client系列簡明教程
JS scroll系列簡明教程
在這裏面，我們討論的，是DOM裏面的element的屬性，是window的方法。
這是，關於offset、client和scroll這幾個東西，還有一部分是關於Dom裏Event的屬性的。
Dom Event中的座標屬性
- event.clientX/Y
- event.pageX/Y
- event.offsetX/Y
- event.layerX/Y
- event.screenX/Y
- event.x/y
==屬性有這麼多，但是clientX 和 screenX用得最多。==
區別
clientX/Y
clientX/Y獲取到的是觸發點相對瀏覽器可視區域左上角距離，不隨頁面滾動而改變。
兼容性：所有瀏覽器均支持
pageX/Y
pageX/Y獲取到的是觸發點相對文檔區域左上角距離，會隨着頁面滾動而改變
兼容性：除IE6/7/8不支持外，其餘瀏覽器均支持
offsetX/Y
offsetX/Y獲取到是觸發點相對被觸發dom的左上角距離，不過左上角基準點在不同瀏覽器中有區別，其中在IE中以內容區左上角爲基準點不包括邊框，如果觸發點在邊框上會返回負值，而chrome中以邊框左上角爲基準點。
兼容性：IE所有版本，chrome，Safari均完美支持，Firefox不支持
layerX/Y
layerX/Y獲取到的是觸發點相對被觸發dom左上角的距離，數值與offsetX/Y相同，這個變量就是firefox用來替代offsetX/Y的，基準點爲邊框左上角，但是有個條件就是，被觸發的dom需要設置爲position:relative或者position:absolute，否則會返回相對html文檔區域左上角的距離。
兼容性：IE6/7/8不支持，opera不支持，IE9/10和Chrome、Safari均支持
screenX/Y
screenX/Y獲取到的是觸發點相對顯示器屏幕左上角的距離，不隨頁面滾動而改變。
兼容性：所有瀏覽器均支持
| 屬性/瀏覽器 | chrome | firefox | ie6/7/8 | ie9 | ie10+ |
|---|---|---|---|---|---|
| offsetX | ✔️ | ✘ | ✔️ | ✔️ | ✔️ |
| clientX | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| pageX | ✔️ | ✔️ | ✘ | ✔️ | ✔️ |
| screenX | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| layerX | ✔️ | ✔️ | ✘ | ✔️ | ✔️ |
| x | ✔️ | ✘ | ✔️ | ✔️ | ✔️ |
綜上所述，clientX 和 screenX 是一路路燈，暢行無阻
測試代碼
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Javascript</title>
<style>
body{margin:0;padding:0;background:#ccc;font-size:12px;overflow:auto}
.main{width: 500px;height: 330px;position: relative;margin: 250px auto 0;background-color: #eee;}
.box{position: absolute;width: 220px;height: 180px;background-color: orange;top: 80px;left: 80px;}
</style>
</head>
<body style="height:1600px;">
<div class="main">
<div class="box" id="box"></div>
</div>
<script>
var oBox = document.getElementById('box');
window.onload = function(){
oBox.onmousedown = function(ev){
ev = ev || window.event;
console.log(ev.offsetX, ev.offsetY);
console.log(ev.clientX, ev.clientY);
console.log(ev.pageX, ev.pageY);
console.log(ev.screenX, ev.screenY);
console.log(ev.layerX, ev.layerY);
console.log(ev.x, ev.y);
}
}
</script>
</body>
</html>
圖解 event.offsetX，event.clientX，event.pageX，event.screenX屬性
圖解 event.layerX，event.layerY 屬性
圖解 event.x，event.y 屬性
Jquery 兼容寫法
Jquery event 事件對象，包含有 event.offsetX， event.clientX，event.pageX，event.screenX等屬性（firefox 瀏覽器中， offsetX 爲 undefined）。firefox 獲取 offsetX / offsetY 的值，需要通過 event 對象的屬性 originalEvent。
<script>
$(function(){
$("#box").mousedown(function(event){
console.log(event.offsetX, event.offsetY);
console.log(event.clientX, event.clientY);
console.log(event.pageX, event.pageY);
console.log(event.screenX, event.screenY);
/* firefox */
console.log(event.originalEvent.layerX, event.originalEvent.layerY);
});
});
</script>
以上內容圖解部分參考自圖解Js event對象offsetX, clientX, pageX, screenX, layerX, x區別。感謝原作者的文章。
本文完。
參考：