javascript YUI 讀碼日記之 YAHOO.util.Dom - Part.4
更新時(shí)間:2008年03月22日 14:42:58 作者:
YAHOO.util.Dom 中的 getXY 函數(shù)讓開發(fā)者充分體驗(yàn)到不同瀏覽器的 Hack 的樂趣。IE8 即將破殼而出,但愿下面的函數(shù)不會(huì)又多個(gè) if 判斷。getXY 函數(shù)使用 匿名函數(shù)執(zhí)行返回 函數(shù)(聽起來(lái)有點(diǎn)拗口,可以參考 圓心 Blog 上的一篇文章)。
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 下,節(jié)點(diǎn)是否為 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;
}
}
// 還是針對(duì) 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注. 有關(guān) IE 的 getBoundingClientRect 方法,可以參考這里。
注. Safari 的 BUG,詳細(xì)情況參見這里。
注. 參見老外的原話(出處):
"- 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.)最后,有關(guān)更多 DOM 的兼容性,可以參看 PPK 的總結(jié)(怎么又是他)。
// 判斷是否是 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 下,節(jié)點(diǎn)是否為 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;
}
}
// 還是針對(duì) 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注. 有關(guān) IE 的 getBoundingClientRect 方法,可以參考這里。
注. Safari 的 BUG,詳細(xì)情況參見這里。
注. 參見老外的原話(出處):
"- 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.)最后,有關(guān)更多 DOM 的兼容性,可以參看 PPK 的總結(jié)(怎么又是他)。
相關(guān)文章
學(xué)習(xí)YUI.Ext 第七天--關(guān)于View&JSONView
學(xué)習(xí)YUI.Ext 第七天--關(guān)于View&JSONView...2007-03-03Gird組件 Part-3:范例RSSFeed Viewer
Gird組件 Part-3:范例RSSFeed Viewer...2007-03-03對(duì)YUI擴(kuò)展的Gird組件 Part-1
對(duì)YUI擴(kuò)展的Gird組件 Part-1...2007-03-03使用EXT實(shí)現(xiàn)無(wú)刷新動(dòng)態(tài)調(diào)用股票信息
最近開始對(duì)ExtJS感興趣了,今天正好有空,花了點(diǎn)時(shí)間,寫了個(gè)基于Ext的例子。2008-11-11ext checkboxgroup 回填數(shù)據(jù)解決
解決checkboxgroup回填數(shù)據(jù)問題的實(shí)現(xiàn)代碼2009-08-08為Yahoo! UI Extensions Grid增加內(nèi)置的可編輯器
為Yahoo! UI Extensions Grid增加內(nèi)置的可編輯器...2007-03-03