javascript获取窗口位置、绝对位置、事件位置等

有段时间没更新博客了，工作实在太忙了，加班加班再加班就是我们这个行业的常态吧、、、还好最近把工作进度完成了，终于有些空余时间了。关于《Javascript高级程序设计》系列，我并没有弃坑，只不过最近在把这本书读第二遍，主要针对一些第一遍没看懂的部分，完成之后我会继续更新的。

这篇文字主要一下三方面内容：

一、javascript获取事件位置

二、Javascript获取dom对象位置

三、Javascript获取绝对坐标

四、浏览器相对桌面位置

 

一、javascript获取事件位置

首先上图，这个图片是我在网上找到的，感觉做的比较好！

事件的位置主要涉及clientX,clientY,screenX,screenY,offsetX,offsetY 。

1.1 offsetX,offsetY

鼠标相对于事件源元素（srcElement）的X,Y坐标。

1.2 event.screenX、event.screenY

鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性

1.3 event.clientX、event.clientY

鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。标准事件和IE事件都定义了这2个属性。

二、Javascript获取dom对象位置

关于clientWidth offsetWidth scrollWidth 等的含义

offsetWidth(width+padding+border)

当前对象的宽度。

style.width也是当前对象的宽度(width+padding+border)。

区别：

1)style.width返回值除了数字外还带有单位px；

2)如对象的宽度设定值为百分比宽度,则无论页面变大还是变小，style.width都返回此百分比,而offsetWidth则返回在不同页面中对象的宽度值而不是百分比值；

3)如果没有给 HTML 元素指定过 width样式，则 style.width 返回的是空字符串；

offsetHeight :(Height+padding+border)

当前对象的高度。

style.height也是当前对象的高度(height+padding+border)。

区别：

1)style.height返回值除了数字外还带有单位px；

2)如对象的高度设定值为百分比高度,则无论页面变高还是变矮，style.height都返回此百分比,而offsetHeight则返回在不同页面中对象的高度值而不是百分比值；

3)如果没有给 HTML 元素指定过 height样式，则 style.height返回的是空字符串；

clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框；

clientHeight: 获取对象可见内容的高度，不包括滚动条，不包括边框；

三、Javascript获取绝对坐标

直接获取页面元素绝对位置的js函数

var p = $("#DoSum");
        var offset = p.offset();
        alert(offset.left);
        alert(offset.top);
//获取元素的纵坐标
function getTop(e){
 var offset=e.offsetTop;
 if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
 return offset;
 }
 //获取元素的横坐标
function getLeft(e){
 var offset=e.offsetLeft;
 if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
 return offset;
 }

还有getBoundingClientRect(),这个也可以获得绝对坐标

x=oRect.left   

y=oRect.top  

四、浏览器相对桌面位置

 

clientWidth是对象看到的宽度（不含边线,即border）

scrollWidth是对象实际内容的宽度（若无padding，那就是边框之间距离，如有padding，就是左padding和右padding之间距离）。

offsetWidth是指对象自身的宽度，整型，单位像素（含边线，如滚动条的占用的宽，值会随着内容的输入而不断改变）。

clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框；

clientHeight: 获取对象可见内容的高度，不包括滚动条，不包括边框；