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 20 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
Dec 04 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
Jan 23 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
在 Typescript 中使用可被复用的 Vue Mixin功能
Apr 17 Javascript
vue如何限制只能输入正负数及小数
Jul 04 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
Joomla下利用configuration.php存储简单数据
2010/05/19 PHP
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
Laravel统计一段时间间隔的数据方法
2019/10/09 PHP
javascript multibox 全选
2009/03/22 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
js获取单选框或复选框值及操作
2012/12/18 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
2013/04/18 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
Django使用多数据库的方法
2017/09/06 Javascript
用JS编写一个函数,返回数组中重复出现过的元素(实例)
2017/09/14 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
2019/05/22 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
Python 变量类型及命名规则介绍
2013/06/08 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
numpy求平均值的维度设定的例子
2019/08/24 Python
使用批处理脚本自动生成并上传NuGet包(操作方法)
2019/11/19 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Python tkinter实现日期选择器
2021/02/22 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
员工拾金不昧表扬信
2014/01/09 职场文书
二手房买卖协议书
2014/04/10 职场文书
超市活动计划书
2014/04/24 职场文书
社区综治宣传月活动总结
2014/07/02 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
2016中秋节广告语
2016/01/28 职场文书
《落花生》教学反思
2016/02/16 职场文书
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python