在做web 开发时，总是避免不了用户与浏览器之间的交互，这个过程我们称作事件。而在这个过程我们总是需要知道一些浏览器和事件相关的信息，这篇文章我们来了解一些 JavaScript 中窗口、视口和元素大小的相关信息，这篇文章我们来熟悉一下JavaScript 中关于 event 对象的位置属性，并附上图解方便理解。
JavaScript 中的event位置属性有：offsetX、offsetY、pageX、pageY、clientX、clientY、screenX、screenY、layerX、layerY、x、y。
首先我们先看一下个浏览器对这些属性的支持情况，如下图：
image.png
图解offsetX、clientX、pageX、screenX属性
image.png
layerX、layerY图解
image.png
event.x 和 event.y 的图解
image.png
测试代码如下：
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8"/>
<title>Javascript之event 位置属性解析</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>
