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 相关文章推荐
ajaxControlToolkit AutoCompleteExtender的用法
Oct 30 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
JavaScript function 的 length 属性使用介绍
Sep 15 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
详解VS Code使用之Vue工程配置format代码格式化
Mar 20 Javascript
layui使用label标签的方法
Sep 14 Javascript
vue语法自动转typescript(解放双手)
Sep 18 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
js实现图片实时时钟
Jan 15 Javascript
让你30分钟快速掌握vue3教程
Oct 26 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
PHP addAttribute()函数讲解
2019/02/03 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
详解Node.js包的工程目录与NPM包管理器的使用
2016/02/16 Javascript
js实现图片360度旋转
2017/01/22 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
2018/09/04 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
使用vue构建多页面应用的示例
2020/10/22 Javascript
python黑魔法之参数传递
2016/02/12 Python
使用python将图片按标签分入不同文件夹的方法
2018/12/08 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
Python json模块与jsonpath模块区别详解
2020/03/05 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
详解Python 最短匹配模式
2020/07/29 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
Myprotein丹麦官网:欧洲第一运动营养品牌
2019/04/15 全球购物
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
JDBC操作数据库的基本流程是什么
2014/10/28 面试题
如何拷贝一整个Java对象,包括它的状态
2013/12/27 面试题
测绘工程系学生的自我评价
2013/11/30 职场文书
店长助理岗位职责
2013/12/13 职场文书
合作合同协议书
2016/03/21 职场文书
OpenCV-Python实现轮廓的特征值
2021/06/09 Python
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python