如何更好的理解(pageX,pageY,clientX,clientY,eventX,eventY,scrollX,scrollY,screenX,screenY,event.offsetX,event.offsetY,offsetLeft,style.left)

时间:2021-11-09 11:47:22

1 pageX,pageY:鼠标指针相对于当前窗口的X,Y坐标,计算区域包括窗口自身的控件和滚动条。(火狐特有)

2 event.clientX,event.clientY:鼠标指针相对于当前窗口的X,Y坐标,和page 不同的是计算区域不包括窗口自身的控件和滚动条。

3 event.X和event.Y:相对于当前窗口,设置或获取鼠标指针位置相对于父文档的x,y像素坐标(可惜火狐不支持,人生总要有些遗憾也是没办法的)。

4 scrollX,scrollY:望文生义,相对于浏览器而言的,随滚动条移动而变化。

5 screenX,screenY:事件发生时鼠标指针相对于屏幕的水平坐标和竖坐标(屏幕左上角的位置)(这个可是跟屏幕大小有关系的啦,不过IE不支持该属性,只读属性)

6 针对5呢,IE是用screenLeft和screenTop(等于screenY+工具栏+地址栏的像素)。话到嘴边了,再说一下innerwidth innerHeight吧,嘿嘿,他两是窗口文档显示区域的宽度,不包括边框和滚动条,该属性可读可写。

7 event.offsetX,event.offsetY:设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 (触发事件的元素,ie,chrome支持此属性,火狐不支持)

8 offsetLeft:值得注意的是该属性并非事件对象的属性,他是DOM对象所有的,获取的是相对于父对象的左边距。该属性表示的是DOM对象在“该DOM对象的层级关系中离该对象最近的,设置了position的父对象”中的位置,虽然话是这么说的,但是不同的浏览器效果不一样,FF中严格按上述说明执行,但是在IE6/7中,这个属性返回该DOM对象在其直接父对象中的位置,但是IE8改正了这个问题,不过IE8又有了一个新问题,其他的浏览器都是从父对象的内容区域的左上角开始定位,IE8确是从父元素的border的左上角开始定位,由于测试环境为IETester中的IE8,不能排除是IETester的问题。

9 style.left:获取的是相对于具有定位属性(position定义为relative)的父对象的左边距。

10 9是读写的,8是只读的,所以要想改变div的位置,只能修改style.left.并且9的值需要在html里预先定义。8则无需事先定义div的位置

先写到这里吧~欢迎大家吐槽纠正以及补充~