递归获取页面元素的真实offsetLeft和offsetTop

由于父元素的定位属性, 导致子元素及其孙元素等的 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>