jquery - 使用内联 offsetparent 获取元素左/顶部的实际偏移量

Question

我正在尝试获取页面上某个元素的坐标。我一直在使用标准方式获取它:

var el = element, pos = {x: 0, y: 0};
while ( el ) {
    pos.x += el.offsetLeft;
    pos.y += el.offsetTop;
    el = el.offsetParent;
}

但是当相关元素具有 display: block，并且其中一个 offsetParents 具有 display: inline; 时，此方法将失败。这是由于 this thread 中描述的事实所致:

在尝试使用 jQuery 后，结果证明他们的 .offset() 方法返回了正确的偏移量，我查看了源代码但没有找到他们是如何做到的。所以我的问题是:我如何获得确切的位置？我不能为这个元素使用 jQuery，以及 the thread described earlier 中的方法太麻烦了，添加元素和测试工作量太大(性能 Angular )，而且使用 Element.getBoundingClientRect 也不可用。

如果您想尝试一下，可以转到 Apple.com打开您选择的调试器并输入以下内容:

var el, el2;
el = el2 = document.querySelector('#worldwide span');
var pos = {x: 0, y: 0};
while ( el2 ) {
    pos.x += el2.offsetLeft;
    pos.y += el2.offsetTop;
    el2 = el2.offsetParent;
}
alert("Calculated position: " + pos.x + "x" + pos.y + " window size: " + screen.width + "x" + screen.height);

通过这段代码，我得到:Calculated position: 1354x988 window size: 1280x800(即左边的偏移量是屏幕的方向，显然不是)

这怎么可能？任何解决方法？近似值？它不必精确，但必须比以前更好。谢谢。

编辑:这是针对 WebKit 渲染引擎的，澄清一下。

Answer 1

我最终选择了 WebKit 的 window.webkitConvertPointFromNodeToPage，但我一直遇到一个错误，它会返回一个完全错误的位置。进一步调查显示，如果有问题的节点显示为:内联，那么它将返回层次结构中最后一个 block 元素的位置。

搜索此图像的分辨率时一无所获(我所找到的只是关于 webkitConvertPointFromNodeToPage 实际做了什么以及 WebKit 的源代码的非常基本的信息)。

通过猜测，我发现如果元素有display: inline-block，它返回正确的位置，所以如果元素是内联的，我就把它改成inline-block，然后计算位置.

如果有人对此问题有更好的解决方案，我很乐意听取您的意见!

编辑:

事实证明，将显示样式更改为内联 block 并不总是一个好主意，因此我没有这样做，而是使用了以下方法:

var offset = {x: 0, y: 0};
if ( getStyle(el, 'display') == 'inline' ) {
    offset.x = el.offsetLeft - el.parentNode.offsetLeft;
    offset.y = el.offsetTop - el.parentNode.offsetTop;
}

var point = window.webkitConvertPointFromNodeToPage(el, new WebKitPoint(0, 0));

return {
    x: Math.round(point.x + offset.x),
    y: Math.round(point.y + offset.y)
}

我正在获取内联子项的 offsetTop/Left 并从其父项中减去它。我不太确定它在具有 display: inline 的 parent 身上如何运作，但它在 90% 的时间里都有效。

但如果有人有更好的想法，我仍然愿意征求建议。