我无法使用JS访问元素的可视位置

Question

我在UIWebview(webkit控件)中有一个多列布局,但是我在访问元素的"可视"位置时遇到了问题.

我将tapX移动4096(4 x 1024,其中1024是'列表页'的高度'),并获得正确的'tapped'元素,但我不知道我是在边缘还是在元素的中间.我需要绝对的顶部和左侧位置,因此我可以使用矩形(e.left,e.top,width,height)在元素顶部设置图层效果 - 获得正确的e.left和e.top证明是棘手的.

tapElement.offsetTop 忽略列布局,转换似乎不起作用.

var tapElement  = document.elementFromPoint(tapX, tapY);

if (!tapElement)
    return;   

var realLeft    = window.getComputedStyle(tapElement).getPropertyValue("offsetLeft");
var realTop     = window.getComputedStyle(tapElement).getPropertyValue("offsetTop");

---

解:

// Figuring out the real top and left positions is difficult
// under the CSS3 multi column layout... But this works :) 

/*
// jQuery method
var realLeft    = $(tapElement).offset().left;
var realTop     = $(tapElement).offset().top;
*/

// DOM method
var box = tapElement.getBoundingClientRect();
var doc = tapElement.ownerDocument;
var docElem = doc.documentElement;
var body = doc.body;
var win = window;
var clientTop = docElem.clientTop || body.clientTop || 0;
var clientLeft = docElem.clientLeft || body.clientLeft || 0;
var scrollTop = win.pageYOffset || docElem.scrollTop || body.scrollTop;
var scrollLeft = win.pageXOffset || docElem.scrollLeft || body.scrollLeft;
var realTop = box.top + scrollTop - clientTop;
var realLeft = box.left + scrollLeft - clientLeft;   

Answer 1

您可以尝试 JQuery 方法“offset”。这是它的文档。 http://api.jquery.com/offset/

如果您无法直接使用 JQuery，检查代码可能有助于解决您的问题。（获取调试版本。）