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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
Javascript获取数组中的最大值和最小值的方法汇总
Jan 01 Javascript
基于JavaScript实现瀑布流布局(二)
Jan 26 Javascript
Node.js文件操作方法汇总
Mar 22 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
无缝滚动的简单实现代码(推荐)
Jun 07 Javascript
基于JavaScript实现自动更新倒计时效果
Dec 19 Javascript
详解Jquery的事件操作和文档操作
Dec 19 Javascript
数组Array的排序sort方法
Feb 17 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
React配置子路由的实现
Jun 03 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计划任务之关闭浏览器后仍然继续执行的函数
2010/07/22 PHP
JQuery自动触发事件的方法
2015/06/13 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
2017/09/05 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
Nodejs实现的操作MongoDB数据库功能完整示例
2019/02/02 NodeJs
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
详解nvm管理多版本node踩坑
2019/07/26 Javascript
javascript实现时钟动画
2020/12/03 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
[04:19]完美世界携手游戏风云打造 卡尔工作室模型介绍篇
2013/04/24 DOTA
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
Python中的hypot()方法使用简介
2015/05/18 Python
Python中enumerate函数代码解析
2017/10/31 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python实现简单名片管理系统
2018/11/30 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
python自动生成sql语句的脚本
2021/02/24 Python
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
企业办公室主任岗位职责
2014/02/19 职场文书
班主任班级寄语大全
2014/04/04 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
群众路线教育实践活动对照检查材料
2014/09/22 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
安全责任书
2015/01/29 职场文书
慰问信格式
2015/02/14 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
JS的深浅复制详细
2021/10/16 Javascript