递归获取页面元素的真实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>
原文链接:segmentfault.com

上一篇:重学前端学习笔记(二十七)--JavaScript的词法
下一篇:gulp-front-matter

相关推荐

  • 面试题1:Promise递归实现拉取数据

    题目:请用promise递归实现拉取100条数据,每次拉取20条,结束条件为当次拉取不足20条或者已经拉取100条数据 ...

    1 个月前
  • 递归遍历树结构,从某个节点开始查找其子节点中的所有叶子节点

    背景 现在项目中哟这样的一个需求,左边显示一棵树目录,点击目录的一级或二级节点,右边显示其子节点中的所有叶子节点,而且要求前端来做这个,不用调用接口请求了,那么,这里记录一下我的实现方法。

    2 个月前
  • 递归调用javascript函数

    arnaud576875Samthere(https://stackoverflow.com/users/576875/arnaud576875)提出了一个问题:Calling a javascrip...

    2 年前
  • 递归匿名函数?

    Incognito(https://stackoverflow.com/users/257493/incognito)提出了一个问题:javascript: recursive anonymous f...

    2 年前
  • 递归函数的理解与优化

    这篇文章主要是我对递归的学习总结 用递归来解决的问题要满足三个条件: 1. 一个问题的解可以分解为几个子问题的解 2. 这个问题与分解之后的子问题,除了数据规模不同,求解思路完全一样 3. 存...

    6 个月前
  • 递归Node.js复制文件夹

    lostsource(https://stackoverflow.com/users/149636/lostsource)提出了一个问题:Copy folder recursively in node...

    2 年前
  • 迭代和递归:一道面试题引发的思考(2)

    前文阅读:迭代和递归:一道面试题引发的思考 不说废话,直接上正文。 问题 已知信息如下,loadUrls用于控制多个异步请求,通过max限制同一时刻的并发请求数,其返回Promise,结果为所有url...

    2 个月前
  • 聊聊面试必考-递归思想与实战

    本篇文章你将学到 image(https://img.javascriptcn.com/3daf6ea0048dbd242c937f43f3248ed2 "image") 为什么要写这篇文章 ...

    8 个月前
  • 算法=>快速排序的尾递归推导

    通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另外一部分的所有数据都要小,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变成有序。

    2 年前
  • 算法-无限分类递归

    作为前端, 不用算法也可以写成项目. 但是如果明白会算法的话, 你写起代码来会更得心应手. 无限分类递归 多数用在树形结构数据. 有这样一组数据: 想要得到的结果是这样子的: 这里我有...

    2 年前

官方社区

扫码加入 JavaScript 社区