0

我的表格记录很少，当用户将鼠标悬停在某个记录上时，我需要显示一个弹出框。

我已经创建了弹出框并在那里设置了消息。唯一剩下的就是设置该框 ( <div id="popup"></div>) 的坐标，使其位于触发该框的元素旁边。

所以我得到了this鼠标悬停的标签。现在我怎样才能得到它在窗口上的位置？

我试过this.offsetLeft了，它与父母有关。该元素是内联的，所以我不知道如何找到它。

我使用纯 JavaScript，请不要推荐 jQuery，因为我不想在这个项目中使用它。

4

2 回答 2

3 
var box = this.getBoundingClientRect();

alert( "y:" + box.top + "x:"+ box.left );​

http://jsfiddle.net/hNShL/

要考虑滚动：

var body = document.body,
    html = document.documentElement,
    scrollTop = window.pageYOffset || html.scrollTop || body.scrollTop || 0,
    scrollLeft = window.pageXOffset || html.scrollLeft || body.scrollLeft || 0,

    box = this.getBoundingClientRect(),

    top = box.top + scrollTop,
    left = box.left + scrollLeft;

alert( "y:" + top + "x:"+ left );​
于 2012-08-07T21:33:21.440 回答
1

您可以尝试递归地遍历元素的offsetParents以获取它们的offsetLeft值并将它们添加到元素自己的 s 中offsetLeft。

这样的事情应该可以解决问题：

function offsetLeftRelativeToPage(element) {
    var offset = element.offsetLeft;
    var offsetParent = element.offsetParent;
    if (offsetParent != null) {
        offset += offsetLeftRelativeToPage(offsetParent);
    }
    return offset;
}

var trigger = document.getElementById('trigger');
var popup = document.getElementById('popup');

trigger.onmouseover = function() {
    var offsetLeft = offsetLeftRelativeToPage(this);
    popup.style.left = offsetLeft;
}

JSFiddle 演示：jsfiddle.net/e6vWV/

于 2012-08-07T21:31:06.813 回答