在前面的几篇文章中，我们讨论过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属性
image.png
图解 event.layerX，event.layerY 属性
image.png
图解 event.x，event.y 属性
image.png
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区别。感谢原作者的文章。
本文完。
参考：
网友评论