获取Dom元素的X/Y坐标
作者：zhusun 来源：Koubei UED 发布时间：2009-10-10 12:49:00
现在Web页面的交互方式越来越多样化，其中拖放页面元素也是一种很常见的操作。在这类操作当中有两个主要问题需要解决，一个是事件的注册方式，一般处理拖放元素的事件顺序是：捕获鼠标正键按下——注册鼠标移动事件——捕获鼠标正键抬起——注销鼠标移动事件；另一个问题就是拖放元素的位置，即X/Y坐标。这里我主要来讲述后面的问题：如何获取一个Dom元素的坐标。
当今已有很多的JS框架封装了获取Dom元素的坐标的方法，我们可以直接使用，而这里我更多的是希望透过这些方法，看到原始的获取坐标方式以及如何处理跨浏览器问题。
首先认识一下getBoundingClientRect方法，标准语法为：
oRect = object.getBoundingClientRect();
Dom节点调用该方法可返回一个ClientRect类型的对象，该对象有四个属性值：top、left、right、bottom，表示了该节点相对于可视浏览器可视区域的左上角位置的坐标，看图就能好理解
坐标说明图1
补充一下，如果当前的元素已经超出可视区域，依然按照可视区域的左上角位置的坐标来计算，如图2
坐标说明图2
这样就可以简单的获取Dom元素在可视区里的X/Y坐标（通过left和top属性）。最后在计算上页面滚动条的偏移量就可以计算出元素在整个页面中的X/Y坐标了。页面滚动偏移量的计算在不同浏览器下有所不同，不过我们可以借鉴YUI里面方法，设计一个通用的方式：
scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
在W3C标准下document.body.scrollTop和document.body.scrollLeft都为0，所以采用了上面兼容的方式获取页面滚动条的偏移量。
0
投稿猜你喜欢
- 描述返回表达式，此表达式已被格式化为日期或时间。语法FormatDateTime(Date[, NamedFormat])FormatDat
假如一个页面中的文本采用的都是同样的字体、同样的字号、同样的颜色，做为读者的你能轻易的区分出哪里是标题，哪里是正文内容吗？所以通常情况下，设- 下面通过对比来看看ASP中3种分页显示的性能，执行效率。一，使用存储过程分页，这种情况又分为两种方式：第一种，使用command对象，如下：
- 在ASP中使用FSO组件生成HTML静态页面,共有两个页面index.htm是首页.程序比较简单，主要是用了ASP里的文件操作
- 问题：关于如何生成随机记录（二）如何从指定表中随机抽取一定量的记录？sql server 中 select top 10 * fr
- 有效地加载数据有时我们需大量地把数据加载到数据表，采用批量加载的方式比一个一个记录加载效率高，因为MySQL不用每加载一条记录就刷新一次索引
- 写了个简洁的隔行变色代码，支持三种动作变化颜色<!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
- 在数据库testDB中存在架构A及用户A，现将testDB数据库所属的用户由A改为B，同时删除用户A；架构也由A改为B，删除架构A，操作如下
- <％'***********************************************'函数
- 我想把本篇作为css基础教程的序曲，从今天开始翻译和整理我从设计网页以来所学到的css基础知识。本教程会分成N个部分，单独发表，其间可能会插
- 内容摘要：当我们不想让某IP服务我们的网站时，我们就要写段程序来限制IP地址。asp中如何对ip进行过滤限制？本文介绍了一种方法，这个函数只
- 在Soundbreak我们每天24小时不间断地播放实况音频和视频，所以对于MySQL的新增的复制特性，我们不能做出很令人信服的测试。通过测试
- 很久没有更新blog了，这段时间实在是发生了很多的事，累身累心。但还是有很多想做的事，比如更新merceCSS、把一直以来所总结的有关模块化
- 特点：1.图片预载入，载入后再显示。意图一次呈现，不会让一块一块下载破坏你的页面，绝佳的用户体验，颠覆传统的浏览器呈现图片的处理方式（需要后
- 1、用户有三种：活跃用户、沉睡用户、外部用户。2、据不完全统计，外部用户8亿，沉睡用户1.2亿，活跃用户1千万。3、就算不去管活跃用户，或者
- 今天是五一劳动节，可是我们劳动人民的节日哦。很多大网站都设计了特殊的logo来表示向每一位普通的劳动者致敬！下面就让我们看看这些logo吧！
- 首先选择操作系统。由于ASP属于MS（Microsoft）的东西，所以我们要选择MS的操作系统，Windows 98以上就可以（
- 为了让鼠标移到小图上显示大图,我利用鼠标事件新建了一个层来显示大图.当然之前最好得到XY坐标取得当前鼠标的X,Y坐标：function&nb
- RegExp就是建立正则的对像。如:Set regEx = New RegExp regE
- 在Google上搜一下，可以发现一大堆对ASP不好的评价，什么运行速度慢、异常处理机制不好、缺乏面向对象机制、开发效率低、漏洞多等等。为了让
