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 相关文章推荐
Autocomplete Textbox Example javascript实现自动完成成功
Aug 17 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
判断iframe里的页面是否加载完成
Jun 06 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
详解Angular.js指令中scope类型的几种特殊情况
Feb 21 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
Apr 19 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
Sep 19 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
leaflet加载geojson叠加显示功能代码
Feb 21 Javascript
openLayer4实现动态改变标注图标
Aug 17 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常用数学函数汇总
2014/11/21 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
php用户注册信息验证正则表达式
2015/11/12 PHP
java微信开发之上传下载多媒体文件
2016/06/24 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
JavaScript Archive Network 集合
2007/05/12 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
node.js中的fs.createReadStream方法使用说明
2014/12/17 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
jquery.masonry瀑布流效果
2017/05/25 jQuery
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
[02:03]永远的信仰DOTA2 中国军团历届国际邀请赛回顾
2016/06/26 DOTA
[01:03:37]Secret vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
简单谈谈Python流程控制语句
2016/12/04 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
使用python 爬虫抓站的一些技巧总结
2018/01/10 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
基于python实现雪花算法过程详解
2019/11/16 Python
python3 实现调用串口功能
2019/12/26 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
高校教师思想汇报
2014/01/11 职场文书
家具促销活动方案
2014/02/16 职场文书
学校周年庆活动方案
2014/08/22 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
教研活动主持词
2015/07/03 职场文书
Python进程间的通信之语法学习
2022/04/11 Python
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js