这样理解比较好吧(pageX,pageY,clientX,clientY,eventX,eventY,scrollX,scrollY,screenX,screenY,event.offsetX,event.offsetY,offsetLeft,style.left)

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的位置

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

时间: 2024-10-08 10:27:42

这样理解比较好吧(pageX,pageY,clientX,clientY,eventX,eventY,scrollX,scrollY,screenX,screenY,event.offsetX,event.offsetY,offsetLeft,style.left)的相关文章

javascript坐标:event.x、event.clientX、event.offsetX、event.screenX 用法

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标. screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标. screenY 设置或获取鼠标指针位置相对于用户屏幕

理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY

event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广泛支持.IE事件中没有这2个属性. event.offsetX.event.offsetY 鼠标相对于事件源元素(srcElement)的X,

扒一扒offsetleft,srollleft,pagex,clientx,postion().left等精确位置的获取与理解

先上个pc端和手机端的图:   说明:上面的属性,都是in这个div的属性值.我是点击的in这个div的左上角,所以pageX.pageY是40. HTML: <div class="out"> <div class="in"></div> </div> css: .out{ width: 300px; height: 300px; background: skyblue; overflow: hidden; } .i

关于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的区别

关于offsetX.offsetY.clientX.clientY.pageX.pageY.screenX.screenY的区别 offsetX.offsetY: 鼠标相对于事件源元素(srcElement)的X,Y坐标 clientX.clientY: 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条. pageX.pagey: 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非窗口坐标.这2个属性不是标准属性,但得到了广

e.pageX、e.clientX、e.screenX、e.offsetX的区别以及元素的一些CSS属性

e.pageX,e.pageY:返回的值是相对于文档的定位,文档的左上角为(0,0),向右为正,向下为正,IE不支持: e.clientX,e.clientY:返回的值是相对于屏幕可见区域的坐标,如果页面有滚动条,呗滚动条隐藏的那部分不进行计算,也可以说是相对于屏幕的坐标,但是不计算上方的工具栏: e.screenX,e.screenY:返回的是相对于屏幕的坐标,浏览器上面的工具栏: e.offsetX,e.offsetY:返回的是相对于文档的坐标,和e.pageX,e.pageY作用相同,但是

jquery pagex与clientx

<html lang="en"> <head> <meta charset="utf-8"> <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> </head> <body style="width:2200px;height:10000px";&g

pageX、clientX、screenX、offsetX、layerX、x

e.pageXe.layerXe.offsetXe.clientXe.x 属性: 测试浏览器: FF9/Chrome15/opera11.52/safari5(win)/IE6/7/8/9 测试代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htm

JavaScript 中一些概念理解 :clientX、clientY、offsetX、offsetY、screenX、screenY

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. offsetX 设置或获取鼠标指针位置相对于触发事件的(this)对象的 x 坐标. offsetY 设置或获取鼠标指针位置相对于触发事件的(this)对象的 y 坐标. screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标. screenY 设置或获取鼠

event事件对象和clientX,clientY

一.event : 事件对象 , 当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象,供我们在需要的调用.如:飞机-黑匣子 事件对象必须在一个事件调用的函数里面使用才有内容 事件函数:事件调用的函数,一个函数是不是事件函数,不在定义的决定,而是取决于这个调用的时候 兼容 ie/chrome : event是一个内置全局对象 标准下 : 事件对象是通过事件函数的第一个参数传入 如果一个函数是被事件调用的那么,这个函数定义的第一个参数就