获取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
投稿猜你喜欢
- 今天在网上找了一下Microsoft Enterprise Library 5.0 如何集成MySQL数据库， 结果只找到了entlib 4
三种遍历列表里面序号和值的方法：最近学习python这门语言，感觉到其对自己的工作效率有很大的提升，特在情人节这一天写下了这篇博客，下面废话- 先记下,免得以后想不起来又到处去找! PHP操作数据库的时候,数据库中数据使用UTF8编码,在读出来的时候,显示的全是???????问号乱码
- SQLyog是一款MySQL可视化工具，他可以将部分SQL操作通过图形化界面操作来完成，方便开发者更好的进行开发及数据库设计。在安装SQLy
- 有时候用phpMyAdmin的时候会突然出现这个错误信息 “无法在发生错误时创建会话，请检查 PHP 或网站服务器日志，并正确配置 PHP
- 数据完整性是任何数据库系统要保证的重点。不管系统计划得有多好，空数据值的问题总是存在。本文探讨了在SQL Server中处理这些值时涉及的3
- requests上传excel数据流headers=self.headers #获取导
- 前言： 在数据库运维过程中，我们时常会关注数据库的链接情况，比如总共有多少链接、有多少活跃链接、有没有执行时间过长的链接等。数据库
- 本文实例讲述了python队列原理及实现方法。分享给大家供大家参考，具体如下：队列（queue）是只允许在一端进行插入操作，而在另一端进行删
- 导语：哈喽，哈喽~大家有没有遇到过这种情况，手机用着用着没有内存了，一到设置里面一看。微信和 QQ 10G!啊这。。。。。就离谱！好说，好说
- 1、jsp页面，携带值跳转到新页 original.jsp var btnClick = {'click .showne
- 返回页面的类容，weburl为页面urlFunction GetBytes(weburl) '创建
- 1、调用字符映射表输入特殊符号在键盘上按win+R，在打开的对话框中输入“charmap”,会出现字符映射表：2、利用字符编码输入特殊符号#
- mysql中replace函数替换字符串介绍下mysql的REPLACE()函数语法：REPLACE()函数的语法如下：REPLACE(st
- file_get_contents的超时处理话说，从PHP5开始，file_get_content已经支持context了（手册上写着：5.
- 一. 建库,建表,加约束. 1.1建库 代码如下:use master go if exists (select * from sysdat
- 前言本篇博客主要解决在使用pandas绘制图像并保存时，由于标签太长，导致坐标轴上的标签显示不全的问题。刚遇到问题时调整了一下图片大小，然鹅
- 一、find_element_by_id()find_element_by_id()1.从上面定位到的元素属性中，可以看到有个id属性：id
- 原文：10 Principles Of Effective Web Design翻译：熊猫2008-02-03本文由熊猫同学授权翻译首发。并
- 1、最近公司实现部分数据统计、分析的报表进行每天定时发送到相关人员的邮箱之中的配置代码被人为删除了，需要重新恢复该功能，由于原先是在linu
