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 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
javascript 自动填写表单的实现方法
Apr 09 Javascript
js 验证身份证信息有效性
Mar 28 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
js判断输入字符串是否为空、空格、null的方法总结
Jun 14 Javascript
BootStrap便签页的简单应用
Jan 06 Javascript
理解javascript中的闭包
Jan 11 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
如何使用gpu.js改善JavaScript的性能
Dec 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模块memcache和memcached区别分析
2011/06/14 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
PHP四舍五入精确小数位及取整
2014/01/14 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
PHP技术开发微信公众平台
2015/07/22 PHP
php 利用socket发送HTTP请求(GET,POST)
2015/08/24 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
什么是json和jsonp,jQuery json实例详详细说明
2012/12/11 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
js获取某月的最后一天日期的简单实例
2013/06/22 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
jquery预览图片实现鼠标放上去显示实际大小
2014/01/16 Javascript
jQuery插件windowScroll实现单屏滚动特效
2015/07/14 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
Vue.js实战之组件的进阶
2017/04/04 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
[05:05]第三天的dota2
2013/07/29 DOTA
[01:25:33]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第二场 12.20
2020/12/23 DOTA
Python3遍历目录树实现方法
2015/05/22 Python
Python简单生成8位随机密码的方法
2017/05/24 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
CSS书写规范、顺序和命名规则
2014/03/06 HTML / CSS
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
Hurley官方网站:扎根于海滩生活方式的全球青年文化品牌
2020/05/18 全球购物
文明倡议书范文
2014/04/15 职场文书
医院员工辞职信范文
2015/05/12 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS