功能实现系列

功能实现之JS获取元素相对页面坐标

biubiubiu~~ 一直想写这篇博客但是一直很忙0、0，现在终于貌似可能也许应该空了下来了T T，前一段时间写了个拖拽放下到一个地方的实现，拖拽实现后(详细见博文:效果实现之拖拽及其脱离的解决方案),如何确定是否拖到了目标区域内是个问题，这里我想到了使用各个元素相对文档的位置来判断，其中经历的一些狗血的事情(这就不扯了)，下面我来简单的阐述下思路和实现。

思路

这里主要是利用DOM元素的offsetLeft和offsetTop。

在HTML中各个元素相对父级(真？)的位置可以利用offsetLeft和offsetTop来确定,这样我们就向需要的相对页面的坐标迈出了第一步！获取的相对父节点的位子。

下面就很好想了啊-、-，获取父节点的相对它的父节点的坐标再获取父节点的父节点的相对它的父节点的坐标再获取父节点的父节点的父节点的。。。。。。

代码

通过以上我们可以很快的写出如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
function getPageP(e){
  var x=e.offsetLeft;
  var y=e.offsetTop;
  while(e.parentNode.parentNode){
    e=e.parentNode;
    x+=e.offsetLeft;
    y+=e.offsetTop;
  }
  return {
    x:x,
    y:y
  };
}

这时你肯定认为搞定了~~

才怪诶~~ 略略略~~

DOM的offset是不是相对parentNode的！！！

offset是相对offsetParent的！！！

下面才是真正的代码，满足需求的代码=、=，还对滑动进行的叠加

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function getPageP(e){
  var x=e.offsetLeft;
  var y=e.offsetTop;
  while(e.offsetParent.offsetParent){
    e=e.offsetParent;
    x+=e.offsetLeft;
    x-=e.scrollLeft;
    y+=e.offsetTop;
    y-=e.scrollTop;
  }
  return {
    x:x,
    y:y
  };
}

END

2016-10-20 完成