javascript YUI 讀碼日記之 YAHOO.util.Dom - Part.4
2019-11-21 01:47:49
供稿：網友
var getXY = function() {
// 判斷是否是 IE
if (document.documentElement.getBoundingClientRect) {
// 注1
return function(el) {
var box = el.getBoundingClientRect();
var rootNode = el.ownerDocument;
return [box.left +
Y.Dom.getDocumentScrollLeft(rootNode), box.top +
Y.Dom.getDocumentScrollTop(rootNode)];
};
} else {
return function(el) {
var pos = [el.offsetLeft, el.offsetTop];
var parentNode = el.offsetParent;
// 判斷是否在 Safari 下，節點是否為 absolute ，
// 并且父元素是否為 body
// 注2.
var accountForBody = (isSafari &&
Y.Dom.getStyle(el, 'position') == 'absolute' &&
el.offsetParent == el.ownerDocument.body);
// 如果父元素不是自身
if (parentNode != el) {
while (parentNode) {
pos[0] += parentNode.offsetLeft;
pos[1] += parentNode.offsetTop;
if (!accountForBody && isSafari &&
Y.Dom.getStyle(parentNode,'position')
== 'absolute' ) {
accountForBody = true;
}
parentNode = parentNode.offsetParent;
}
}
// 還是針對 Safari 的
if (accountForBody) { //safari doubles in this case
pos[0] -= el.ownerDocument.body.offsetLeft;
pos[1] -= el.ownerDocument.body.offsetTop;
}
parentNode = el.parentNode;
// account for any scrolled ancestors
while ( parentNode.tagName &&
!patterns.ROOT_TAG.test(parentNode.tagName) )
{
// work around opera inline/table scrollLeft/Top bug
// 注3.
if (Y.Dom.getStyle(parentNode, 'display')
.search(/^inline|table-row.*$/i)) {
pos[0] -= parentNode.scrollLeft;
pos[1] -= parentNode.scrollTop;
}
parentNode = parentNode.parentNode;
}
return pos;
};
}
}() // NOTE: Executing for loadtime branching注. 有關 IE 的 getBoundingClientRect 方法，可以參考這里。
注. Safari 的 BUG，詳細情況參見這里。
注. 參見老外的原話（出處）：
"- Remove parent scroll UNLESS that parent is inline or a table
to work around Opera inline/table scrollLeft/Top bug"
Fixed in Opera 9.5. (also, Opera 9.5 supports getBoundingClientRect
and getClientRects.)最后，有關更多 DOM 的兼容性，可以參看 PPK 的總結（怎么又是他）。
