代码之家 › 专栏 › 技术社区 › raphink

使用Chrome获取Javascript中对象的真实位置

position google-chrome javascript

raphink · 技术社区 · 14 年前

我尝试的最后一段代码是:

 var getPost = function (obj) {
    var pos = {'x':0,'y':0};
    if(obj.offsetParent) {
        while(1) {
          pos.x += obj.offsetLeft;
          pos.y += obj.offsetTop;
          if(!obj.offsetParent) {
            break;
          }
          obj = obj.offsetParent;
        }
    } else if(obj.x) {
        pos.x += obj.x;
        pos.y += obj.y;
    }
    return pos;
  }

这段代码在Chrome上不起作用,除了在具有绝对位置(用CSS设置)的对象上。

有没有一个好的,跨浏览器的方法来实现这一点?

3 回复 | 直到 14 年前

eitch 14 年前

不久前,我遇到过一个例子,我也在处理鼠标位置和对象,因为我需要一些拖放操作。我想出了两种方法:

/**
 * Calculates the mouse x and y position from the mouse move event fired by the document
 * 
 * @param event
 *            the mouse move event fired by the document
 * 
 * @return the mouse coordinates object with two variables x and y
 */
function mouseCoords(ev) {
  var event = ev;

  // IE does not pass the event object
  if (event == null)
    event = window.event;

  try {

    // normal style
    if (event.pageX) {
      return {
          x : event.pageX,
          y : event.pageY
      };
    }
    // IE style
    else {
      return {
          x : event.clientX + document.body.scrollLeft - document.body.clientLeft,
          y : event.clientY + document.body.scrollTop - document.body.clientTop
      };
    }

  } catch(ex) {

    // IE style
    return {
        x : event.clientX + document.body.scrollLeft - document.body.clientLeft,
        y : event.clientY + document.body.scrollTop - document.body.clientTop
    };
  }
}

/**
 * Calculates an object with the x and y coordinates of the given object
 * 
 * @param object
 *            the object of which the coordinates to be calculated
 * 
 * @return an object with x and y coordinates
 */
function getObjectPosition(object) {
  var left = 0;
  var top = 0;

  while (object.offsetParent) {

    left += object.offsetLeft;
    top += object.offsetTop;

    object = object.offsetParent;
  }

  left += object.offsetLeft;
  top += object.offsetTop;

  return {
      x : left,
      y : top
  };
}

raphink 14 年前

好吧,我的问题在别的地方。我是这样调用函数的:

var allPosts = document.getElementsByClassName('post-outer');

for (post in allPosts) {
   console.log('Post has position '+getPos(post));
}

var allPosts = document.getElementsByClassName('post-outer');

for (var i=0, len=allPosts.length; i<len; ++i ){
  console.log('Post position is '+getPos(allPosts[i]).y);
}

谢谢大家的帮助:-)

Josh Stodola 14 年前

这不适用于绝对定位,因为它不考虑 top 和 left

我本来打算从jQuery中删除这部分代码并将其发布到这里,但它太扎根了。所以我只能推荐使用jQuery!要做到这一点,只需在标记中包含它(在任何其他标记之前) script 标签)。。。

<script type="text/javascript"
 src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

一旦你引用了它,你就可以 get the position 一个元素如此容易。。。

$(function() {
  var pos = $(".className").position();
  alert(pos.top + "\n" + pos.left);
});