<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>study</title>
</head>
<body>
<div style="height: 1000px"></div>
<div class="out">
<div class="center" onclick="mycenter(event,this)">
</div>
</div>
<style>
.out {
width: 300px;
height: 300px;
background: red;
position: relative;
overflow: auto;
}
.center {
width: 200px;
height: 200px;
background: yellow;
position: absolute;
left: 300px;
top: 300px;
}
</style>
<script>
function mycenter(ev, obj) {
console.log("获取页面元素位置信息：", obj.getBoundingClientRect())
console.log("当前元素宽高：(" + obj.offsetWidth + "," + obj.offsetHeight + ")")
console.log("当前元素定位相对于父定位：(" + obj.offsetLeft + "," + obj.offsetTop + ")")
console.log("父元素文档宽高：(" + obj.parentNode.scrollWidth + "," + obj.parentNode.scrollHeight + ")")
console.log("父元素滚动条滚动距离：(" + obj.parentNode.scrollLeft + "," + obj.parentNode.scrollTop + ")")
console.log("鼠标点击定位相对于屏幕：(" + ev.screenX + "," + ev.screenY + ")")
console.log("鼠标点击定位相对于可视区：(" + ev.clientX + "," + ev.clientY + ")")
console.log("鼠标点击定位相对于页面：(" + ev.pageX + "," + ev.pageY + ")")
console.log("鼠标点击定位相对于当前元素：(" + ev.offsetX + "," + ev.offsetY + ")")
}
</script>
</body>
</html>
