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 相关文章推荐
ajax处理php返回json数据的实例代码
Jan 24 Javascript
javascript怎么禁用浏览器后退按钮
Mar 27 Javascript
AngularJS入门教程之学习环境搭建
Dec 06 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
js创建数组的简单方法
Jul 27 Javascript
JQuery之proxy实现绑定代理方法
Aug 01 Javascript
jQuery增加、删除及修改select option的方法
Aug 19 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
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
用 PHP5 轻松解析 XML
2006/12/04 PHP
php常量详细解析
2015/10/27 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
JavaScript 10件让人费解的事情
2010/02/15 Javascript
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
2014/06/20 Javascript
php读取sqlite数据库入门实例代码
2014/06/25 Javascript
Javascript中replace()小结
2015/09/30 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
基于JSON数据格式详解
2017/08/31 Javascript
JavaScript实现重力下落与弹性效果的方法分析
2017/12/20 Javascript
vue+swiper实现侧滑菜单效果
2017/12/28 Javascript
Angular4学习之Angular CLI的安装与使用教程
2018/01/04 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
react基本安装与测试示例
2020/04/27 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
python字典的常用操作方法小结
2016/05/16 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
Python如何实现在字符串里嵌入双引号或者单引号
2020/03/02 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
python 如何引入协程和原理分析
2020/11/30 Python
python 如何对logging日志封装
2020/12/02 Python
HTML5和CSS3实例教程总结(推荐)
2016/07/18 HTML / CSS
微博营销计划书
2014/01/10 职场文书
行政助理的岗位职责
2014/02/18 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
一行Python命令实现批量加水印
2022/04/07 Python