1、clientX,clientY
clientX：当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置；
clientY：当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置；
2、offsetX，offsetY(pageX,pageY意思一样)
offsetX：当鼠标事件发生时，鼠标相对于事件源x轴的位置
offsetY：当鼠标事件发生时，鼠标相对于事件源y轴的位置
3、offsetWidth，offsetHeight
offsetWidth：width + padding-right + padding-left + border-left + border-right
offsetHeight：height + padding-top + padding-bottom + border-top + border-bottom
4、clientWidth，clientHeight
clientWidth:width + padding-left + padding-right
clientHeight:height + padding-top + padding-bottom
5、clientTop，clientLeft
clientTop:border-top
clientLeft:border-left
6、offsetTop，offsetLeft
offsetTop:当前元素 上边框 外边缘 到 最近的已定位父级（offsetParent） 上边框 内边缘的 距离。如果父级都没有定位，则分别是到body 顶部 的距离
offsetLeft：当前元素 左边框 外边缘 到 最近的已定位父级（offsetParent） 左边框 内边缘的距离。如果父级都没有定位，则分别是到body 左边的距离
例子：
1、有父级元素，且父级元素有定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrapper{
width: 200px;
height: 200px;
background: #0BB20C;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.box{
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
border: 3px solid black;
/* margin-top: 5px; */
}
</style>
</head>
<body>
<div id="wrapper">
<div class="box">
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var box = document.querySelector('.box');
box.onclick = function(event){
var e = event || window.event;
//鼠标点击的位置距离目标元素的x坐标 和 y坐标(根据目标元素而言)
console.log('offsetX:'+ e.offsetX,'offsetY:'+ e.offsetY)
//鼠标点击的位置距离窗口的x坐标 和 y坐标(根据html窗口而言)
console.log('clientX:'+e.clientX,'clientY:'+e.clientY);
//offsetWidth = width + padding-right + padding-left + border-left + border-right
//offsetHeight = height + padding-top + padding-bottom + border-top + border-bottom
console.log('offsetWidth:'+this.offsetWidth,'offsetHeight:'+this.offsetHeight);
//offsetLeft:margin-left; offsetTop:margin-top
console.log('offsetLeft:'+this.offsetLeft,'offsetTop:'+this.offsetTop);
//clientWidth = width + padding-left + padding-right
//clientHeight = height + padding-top + padding-bottom
console.log('clientWidth:'+this.clientWidth,'clientHeight:'+this.clientHeight)
//clientTop = border-top
//clientLeft = border-left
console.log('clientTop:'+this.clientTop,'clientLeft:'+this.clientLeft)
}
}
</script>
</body>
</html>
2、有父级元素，但是父级元素没有定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#wrapper{
width: 200px;
height: 200px;
background: #0BB20C;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
/* position: relative; */
}
.box{
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
border: 3px solid black;
/* margin-top: 5px; */
}
</style>
</head>
<body>
<div id="wrapper">
<div class="box">
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var box = document.querySelector('.box');
box.onclick = function(event){
var e = event || window.event;
//鼠标点击的位置距离目标元素的x坐标 和 y坐标(根据目标元素而言)
console.log('offsetX:'+ e.offsetX,'offsetY:'+ e.offsetY)
//鼠标点击的位置距离窗口的x坐标 和 y坐标(根据html窗口而言)
console.log('clientX:'+e.clientX,'clientY:'+e.clientY);
//offsetWidth = width + padding-right + padding-left + border-left + border-right
//offsetHeight = height + padding-top + padding-bottom + border-top + border-bottom
console.log('offsetWidth:'+this.offsetWidth,'offsetHeight:'+this.offsetHeight);
//offsetLeft:margin-left; offsetTop:margin-top
console.log('offsetLeft:'+this.offsetLeft,'offsetTop:'+this.offsetTop);
//clientWidth = width + padding-left + padding-right
//clientHeight = height + padding-top + padding-bottom
console.log('clientWidth:'+this.clientWidth,'clientHeight:'+this.clientHeight)
//clientTop = border-top
//clientLeft = border-left
console.log('clientTop:'+this.clientTop,'clientLeft:'+this.clientLeft)
}
}
</script>
</body>
</html>
