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 Array数组对象的扩展函数代码
May 22 Javascript
JavaScript获取路径设计源码
May 22 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
Dec 17 Javascript
简单实现js页面切换功能
Jan 10 Javascript
浅谈js中的三种继承方式及其优缺点
Aug 10 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
vue+element实现批量删除功能的示例
Feb 28 Javascript
关于vue面试题汇总
Mar 20 Javascript
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
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一些十分严重的缺陷详解
2013/06/03 PHP
简单实现PHP留言板功能
2016/12/21 PHP
PHP实现大数(浮点数)取余的方法
2017/02/18 PHP
javascript实现标签切换代码示例
2016/05/22 Javascript
JS实现数字格式千分位相互转换方法
2016/08/01 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
vue写一个组件
2018/04/09 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
解决Layui 表单提交数据为空的问题
2018/08/15 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
2020/03/19 Javascript
VueQuillEditor富文本上传图片(非base64)
2020/06/03 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
Python中的二叉树查找算法模块使用指南
2014/07/04 Python
python自带的http模块详解
2016/11/06 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
Python的Lambda函数用法详解
2019/09/03 Python
Django框架HttpRequest对象用法实例分析
2019/11/01 Python
python 字段拆分详解
2019/12/17 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
python三引号如何输入
2020/07/06 Python
使用phonegap检测网络状态的方法
2017/03/30 HTML / CSS
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
写给爸爸的道歉信
2014/01/15 职场文书
初中学生期末评语
2014/04/24 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
匿名检举信范文
2015/03/02 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
MYSQL(电话号码,身份证)数据脱敏的实现
2021/05/28 MySQL