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倒计时页面跳转实例小结
Sep 11 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
JavaScript中BOM对象原理与用法分析
Jul 09 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
js实现数字跳动到指定数字
Aug 25 Javascript
详解ES6 扩展运算符的使用与注意事项
Nov 12 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
PHPMailer的主要功能特点和简单使用说明
2014/02/17 PHP
thinkphp实现面包屑导航(当前位置)例子分享
2014/05/10 PHP
PHP判断数据库中的记录是否存在的方法
2014/11/14 PHP
PHP验证码生成原理和实现
2016/01/24 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
JavaScript代码复用模式实例分析
2012/12/02 Javascript
浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用
2014/11/23 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
详解React 条件渲染
2020/07/08 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
python求素数示例分享
2014/02/16 Python
Python编写一个优美的下载器
2018/04/15 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
python reverse反转部分数组的实例
2018/12/13 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
使用Python画了一棵圣诞树的实例代码
2020/11/27 Python
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
Ejb技术面试题
2015/04/29 面试题
同学会邀请书大全
2014/01/12 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
春游踏青活动方案
2014/08/14 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
商务代表岗位职责
2015/02/15 职场文书
vue 实现上传组件
2021/05/31 Vue.js
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server
yolov5返回坐标的方法实例
2022/03/17 Python
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js