我在 UIWebview(webkit 控件)中有一个多列布局,但在访问元素的“视觉”位置时遇到问题。
我将 tapX 移动 4096(4 x 1024,其中 1024 是“列页面”的高度),并获得正确的“点击”元素,但我无法判断我是在边缘还是在元素的中间. 我需要绝对的顶部和左侧位置,因此我可以使用 (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;