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

Posted SeedQi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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: 获取对象可见内容的高度,不包括滚动条,不包括边框;

 

 

以上是关于javascript获取窗口位置绝对位置事件位置等的主要内容,如果未能解决你的问题,请参考以下文章

QGraphicsItem 移动事件 - 获取绝对位置

JavaScript 中一些概念理解 :clientXclientYoffsetXoffsetYscreenXscreenY

如何在 Javascript 中获取对象在页面上的绝对位置? [复制]

通过 JavaScript 获取元素的位置

获取光标书写位置

JavaScript 中一些概念理解 :clientXclientYoffsetXoffsetYscreenXscreenY