Question

我一直在编写一些Javascript来随机地在this page上放置一个ducky。

我想让它隐藏在对象的一边（比如帖子），但我最终不得不对其进行硬编码，因为我无法正确检索相对对象的实际位置用Chrome。我读了很多关于它的东西，并使用递归的offsetParent方式，但没有得到任何好的结果。

我尝试过的最后一段代码是：

 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设置）除外。

是否有一种良好的跨浏览器方式来实现这一目标？

Answer 1

我有一个案例，我不久前使用鼠标位置和物体，因为我需要一些拖放。所以这些是我提出的两种方法：

/**
 * 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
  };
}

我希望这可以帮到你。这适用于IE，Firefox和Chrome。

Answer 2

好吧，我的问题出在其他地方。这就是我在调用函数时所做的：

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

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

你可以告诉我在for循环中不习惯Javascript的递归行为，所以下面的代码实际上解决了我的问题：

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);
}

感谢大家的帮助： - ）

Answer 3

这不适用于绝对定位，因为它不会考虑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);
});

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

3 个答案: