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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
jquery一般方法介绍 入门参考
Jun 21 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
JavaScript中对象介绍
Dec 31 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
浅谈JavaScript变量的自动转换和语句
Jun 12 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
vue编写简单的购物车功能
Jan 08 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
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上传非标准格式的图片pjpeg失败的方法
2017/03/12 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
php格式文件打开的四种方法
2018/02/24 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
javascript实现状态栏中文字动态显示的方法
2015/10/20 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
如何优雅地在vue中添加权限控制示例详解
2019/03/07 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
浅谈python编译pyc工程--导包问题解决
2019/03/20 Python
Python交互式图形编程的实现
2019/07/25 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
HTML5 Canvas实现文本对齐的方法总结
2016/03/24 HTML / CSS
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
酒店公关部经理岗位职责
2013/11/24 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
2014年党员评议表自我评价
2014/09/27 职场文书
校友会致辞
2015/07/30 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
Elasticsearch 批量操作
2022/04/19 Python