javascript YUI 读码日记之 YAHOO.util.Dom - Part.4


Posted in Javascript onMarch 22, 2008

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 的总结(怎么又是他)。

Javascript 相关文章推荐
javascript下操作css的float属性的特殊写法
Aug 22 Javascript
Javascript中call和apply函数的比较和使用实例
Feb 03 Javascript
js自定义select下拉框美化特效
May 12 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
Vue 进阶教程之v-model详解
May 06 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
vscode vue 文件模板的配置方法
Jul 23 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
详解Webpack4多页应用打包方案
Jul 16 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 #Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 #Javascript
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 #Javascript
YUI 读码日记之 YAHOO.lang.is*
Mar 22 #Javascript
详解new function(){}和function(){}() 区别分析
Mar 22 #Javascript
Javascript的一种模块模式
Mar 22 #Javascript
javascript cookie解码函数(兼容ff)
Mar 17 #Javascript
You might like
用PHP书写安全的脚本代码
2012/02/05 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
jQuery中:last选择器用法实例
2014/12/30 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
详解Vue-cli3.X使用px2rem遇到的问题
2019/08/09 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
Python 错误和异常小结
2013/10/09 Python
python二叉树的实现实例
2013/11/21 Python
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Django JWT Token RestfulAPI用户认证详解
2019/01/23 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
适合Python初学者的一些编程技巧
2020/02/12 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
高中毕业生自我鉴定
2013/11/03 职场文书
实习自我评价怎么写
2013/12/02 职场文书
毕业生大学生活自我总结
2014/01/31 职场文书
幼儿教师国培感言
2014/02/19 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
高考升学宴答谢词
2015/01/20 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
怎么用Python识别手势数字
2021/06/07 Python
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis