<!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 { 300px; height: 300px; background: red; position: relative; overflow: auto; } .center { 200px; height: 200px; background: yellow; position: absolute; left: 300px; top: 300px; } </style> <script> function mycenter(ev, obj) { 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>