Question

这可能已经被问到了，但是我无法找到任何我正在尝试做的修复。

我试图在事件对象上找到属性的神奇组合，以及滚动和其他偏移，以便给出相对于可能存在或不存在的最顶层窗口的元素的位置iframe 。我这样做的目的是尝试将一个小的（绝对定位的）图像淡入正在被覆盖的元素的右侧。

我试图获得jQuery悬停事件的位置。我尝试了以下属性的不同组合：

$(element).position()
$(element).offset()
$(element).scrollTop()
$(element).scrollLeft();
$(document).scrollTop();
$(document).scrollLeft();
event.clientX
event.clientY
event.pageX
event.pageY

是否有人有能够提供这些数字的函数或等式？

Answer 1

现代浏览器中最简单的方法是document.querySelector('.foo').getBoundingClientRect() return和object包含属性top和left，它们是元素相对于viewport。

以上方法适用于IE >= 5，有几个简单的黑客，请参阅http://ejohn.org/blog/getboundingclientrect-is-awesome/

如果您在页面上有jQuery.offset()，则可以使用jQuery方法。这将返回elements offset一致的跨浏览器。

从offset获取所述元素的<iframe>可能有点棘手，具体取决于您尝试获取位置的位置，即脚本与{{1}在同一页面上运行}可能位于element中，或位于<iframe>

中element的根页中

如果您是第一种情况，只要您的元素在<iframe>内的某处重新定位，就不需要做任何事情，因为您已经有了正确的偏移量。

如果您在<iframe>之外，则需要考虑<iframe>偏移量，因为iframe.getBoundClientRect()相对于它自己的element.getBoundingClientRect()（viewport }）

Answer 2

我设法找到一些适用于这种情况的代码。希望这有助于未来的人：

var timeoutID;
$(element).hover(function () {
    // cancel any pending fades
    window.clearTimeout(timeoutID);

    var offset = {
        left: 0,
        top: 0
    };

    if (top !== self) {
        offset = top.$('#divContainingIframes').offset();
    }

    var that = $(this);
    var elementPosition = that.position();

    var xCoord = offset.left + // distance between screen and iframe
        elementPosition.left + // distance between iframe and element
        that.width() + // width of the element
        5; // 5 pixel padding

    var yCoord = offset.top + // distance between screen and iframe
        elementPosition.top; // distance between iframe and element

    // call the show function with xCoord and yCoord
}, function () {
    // don't fade immediately, wait a half second
    timeoutID = setTimeout(function () {
        // call some hide function
    }, 500);
});

用于获取元素相对于最顶层窗口的位置的函数

2 个答案: