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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
asp 取文本框名称代码
Dec 02 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
May 24 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
用瀑布流的方式在网页上插入图片的简单实现方法
Sep 23 Javascript
canvas 实现中国象棋
Feb 17 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
Nov 25 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
es6中new.target的作用和使用场景简单示例分析
Mar 14 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 文件上传模型,支持多文件上传
2009/08/13 PHP
php微信开发之谷歌测距
2018/06/14 PHP
Chrome扩展页面动态绑定JS事件提示错误
2014/02/11 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
2016/06/01 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
搭建Bootstrap离线文档的方法
2016/12/02 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
2017/01/22 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
JavaScript闭包和回调详解
2017/08/09 Javascript
js中怎么判断两个字符串相等的实例
2019/01/17 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
JavaScript canvas实现文字时钟
2021/01/10 Javascript
[45:18]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第一场
2018/04/04 DOTA
浅谈Python中的zip()与*zip()函数详解
2018/02/24 Python
python实现机器学习之元线性回归
2018/09/06 Python
set在python里的含义和用法
2019/06/24 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
pycharm修改file type方式
2019/11/19 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
Nike比利时官网:Nike.com (BE)
2019/02/07 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
写好求职信第一句话的技巧
2013/10/26 职场文书
大学生作弊检讨书
2014/02/19 职场文书
期末评语大全
2014/05/04 职场文书
班级标语大全
2014/06/21 职场文书
四风个人对照检查材料思想汇报
2014/09/25 职场文书
副校长个人对照检查材料思想汇报
2014/10/04 职场文书
高中运动会广播稿
2015/08/19 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
Django中的JWT身份验证的实现
2021/05/07 Python
使用python绘制横竖条形图
2022/04/21 Python