由于父元素的定位属性, 导致子元素及其孙元素等的offsetLeft和offsetTop变得和预期不一致(预期上都是到屏幕左边和上边的位置),
由于需要做鼠标拖动旋转和鼠标框选, 所以必须拿到统一坐标系的相对位置的值(距离屏幕左上角), 于是就有了递归计算元素的真实offsetleft和offsettop的值;
css初始化;
<style>* { margin: 0px; padding: 0px;}</style>随意布局, top, left, padding,margin随意填写
<div class="c" style="position: absolute;left:10px;top: 10px;padding: 20px;"> <div class="b" style="position: relative;left:-50px;top:-60px;padding: 200px;"> <div id="a" style="width: 400px;height: 400px; border: 1px solid red;"> 123123123 </div> </div></div><script> let a = document.getElementById('a'); console.log(a);//a元素 console.log(a.offsetTop);//实际上此时a的offsetTop和a的offsetLeft已经被父元素的定位所改变, 不准确 console.log(a.offsetLeft); document.onmousedown = function (e) { console.log(e.clientX) console.log(e.clientY) console.log(getreal(a)); } function getreal(el, pname = 'body') { let left = el.offsetLeft; let top = el.offsetTop; if (el.offsetParent && el.offsetParent.tagName !== pname) {//默认一致计算到body, 实际上需要根据需求(实际坐标点)进行修改, 可以用className或者id或者别的什么的, 灵活改变; let p = getreal(el.offsetParent, pname); left += p[0]; top += p[1]; } return [left, top]; }</script>