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

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

  •  1
  • raphink  · 技术社区  · 14 年前

    this page .

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

     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 年前
        1
  •  1
  •   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
      };
    }
    

        2
  •  1
  •   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);
    }
    

    谢谢大家的帮助:-)

        3
  •  0
  •   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);
    });