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获取窗口位置绝对位置事件位置等的主要内容,如果未能解决你的问题,请参考以下文章
JavaScript 中一些概念理解 :clientXclientYoffsetXoffsetYscreenXscreenY
如何在 Javascript 中获取对象在页面上的绝对位置? [复制]
JavaScript 中一些概念理解 :clientXclientYoffsetXoffsetYscreenXscreenY