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>