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 继承详解(二)
Jul 13 Javascript
Javascript 汉字字节判断
Aug 01 Javascript
javascript 鼠标拖动图标技术
Feb 07 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
基于JavaScript实现五子棋游戏
Aug 26 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
JavaScript交换变量常用4种方法解析
Sep 02 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语法(5)
2006/10/09 PHP
Session的工作方式
2006/10/09 PHP
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
随时给自己贴的图片加文字的php代码
2007/03/08 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
JavaScript 事件查询综合
2009/07/13 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
AngularJS使用ng-inlude指令加载页面失败的原因与解决方法
2017/01/19 Javascript
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
jQuery plugin animsition使用小结
2017/09/14 jQuery
Webpack4 使用Babel处理ES6语法的方法示例
2019/03/07 Javascript
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
[01:00:17]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第二场 1月25日
2021/03/11 DOTA
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
PyQt5实现拖放功能
2018/04/25 Python
使用Python进行QQ批量登录的实例代码
2018/06/11 Python
python查看模块,对象的函数方法
2018/10/16 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
python 实现图像快速替换某种颜色
2020/06/04 Python
Python分析最近大火的网剧《隐秘的角落》
2020/07/02 Python
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
党员教师批评与自我批评发言稿
2014/10/15 职场文书
工伤死亡理赔协议书
2014/10/20 职场文书
2014年班主任工作总结
2014/11/08 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
golang switch语句的灵活写法介绍
2021/05/06 Golang
python执行js代码的方法
2021/05/13 Python