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编程起步(第四课)
Feb 27 Javascript
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
Dec 15 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
js从Cookies里面取值的简单实现
Jun 30 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
JavaScript Array对象详解
Mar 01 Javascript
超实用的JavaScript代码段 附使用方法
May 22 Javascript
jquery插件格式实例分析
Jun 16 Javascript
微信小程序实现人脸识别
May 25 Javascript
Vue-component全局注册实例
Sep 06 Javascript
原生js实现二级联动菜单
Nov 27 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
Uchome1.2 1.5 代码学习 common.php
2009/04/24 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
你必须知道的Javascript知识点之"字面量和对应类型"说明介绍
2013/04/23 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
2015/08/06 Javascript
JavaScript+html5 canvas制作的圆中圆效果实例
2016/01/27 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
[50:17]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python中logging模块的用法实例
2014/09/29 Python
python使用socket连接远程服务器的方法
2015/04/29 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
Python获取linux主机ip的简单实现方法
2016/04/18 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
解决pandas无法在pycharm中使用plot()方法显示图像的问题
2018/05/24 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
python三大神器之fabric使用教程
2019/06/10 Python
Pycharm及python安装详细教程(图解)
2020/07/31 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
PHP面试题大全
2015/10/16 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
学习党章思想汇报
2014/01/07 职场文书
公司晚会策划方案
2014/05/17 职场文书
集团财务总监岗位职责
2015/04/03 职场文书
2015年学校教育教学工作总结
2015/04/22 职场文书
七年级英语教学反思
2016/02/15 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫