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

e.pageX，e.pageY：返回的值是相对于文档的定位，文档的左上角为(0,0)，向右为正，向下为正，IE不支持（不包含上方工具栏）；e.clientX，e.clientY：返回的值是相对于屏幕可见区域的坐标，如果页面有滚动条，呗滚动条隐藏的那部分不进行计算，也可以说是相对于屏幕的坐标，但是不计算上方的工具栏（不包含上方工具栏）；clientWidth, clientHeight：包含width+padding,不包含border;
scrollWidth,scrollHeight: 包含width+padding,不包含border;
offsetWidth, offsetHeight: 包含border+padding+width；
style.width, style.height: 包含width,不包含border+padding.
e.screenX，e.screenY：返回的是相对于屏幕的坐标，浏览器上面的工具栏（包含上方工具栏）；e.offsetX，e.offsetY：返回的是元素距离带有定位的父元素的位置，如果没有定位的父元素就是对body，和e.pageX，e.pageY作用相同，但是只有IE支持（不包含上方工具栏）。

$(window).scrollTop()：返回的是浏览器右边的滚动条滚动的距离（不包含上方工具栏）；所以：e.pageY=e.pageY||e.clientY+$(window).scrollTop();  //兼容性的写法

pageXOffset 和 pageYOffset

pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

这些属性是只读的。

举例

垂直和水平滚动 100 个像素的内容，并弹出 pageXOffset 和 pageYOffset：

window.scrollBy(100, 100);

alert("pageXOffset: " + window.pageXOffset + ", pageYOffset: " + window.pageYOffset);


下面说一下关于.offset()，.position()，.scrollTop()，.width()，.innerWidth()，。.outerWidth()的区别：

.offset().top：返回元素距离文档上方的距离；

.offset().left：返回的是元素距离文档左边的距离；还可以自己进行设置，.offset({top:20,left:20});.position().top：返回的是与被定位的祖先元素的偏移距离，如果他的父元素被定位了，不管是绝对新定位还是相对定位，返回的是与他的父元素的偏移距离，如果他的父元素没有被定位，他的每一个祖先元素被定位了，则返回的是与他的祖先元素的偏移距离，如果都没有被定位，则返回的是相对于文档的偏移距离，与.offser().top返回值相同；
同理.position().left.scrollTop()：如果一个元素有滚动条，则返回的是滚动条滚动的长度；同理.scrollLeft().width()：返回的是元素的宽度，这个宽度不包含padding，border，margin，同理.height()；支持写操作，$n1.height( 20 );.innerWidth()：返回的是元素的宽度，这个宽度包含padding，但不包含border与margin，同理.innerHeight()；支持写操作，$n1.innerWidth( 20 );.outerWidth()：返回的是元素的宽度，这个宽度包含padding，border，但不包含margin，同理.outerHeight()；.outerWidth(true)：此时返回的宽度也包含margin了$('.wrap').width( function(index, width){return Math.max(width, 1200);//设置其最小宽度为1200px
} );

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

JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性. 之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反 ...
pageX、clientX、screenX、offsetX、layerX、x
参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX--相对整个页面的坐标 e.layerX- ...
PageX、clientX、screenX、offsetX、layerX的区别
一.PageX和clientX PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是 ...
clientX,clientY,screenX,screenY,offsetX,offsetY 区别测试
clientX:当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等),鼠标相对于浏览器(这里说的是浏览器的有效区域)x轴的位置: clientY:当鼠标事件发生 ...
js 事件回调函数的对象属性说明：clientX、screenX、offsetX、pageX
clientX 鼠标相对于浏览器左上角x轴的坐标: 不随滚动条滚动而改变: clientY 鼠标相对于浏览器左上角y轴的坐标: 不随滚动条滚动而改变: pageX 鼠标相对于浏览器左上角x轴的坐标: ...
什么?你还不知道offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别，进来唠唠
offsetX.offsetY: 鼠标相对于事件源元素的X,Y坐标.比如说,给黄色的盒子定义一个点击事件,则这个offset的坐标原点就在这个黄色盒子的左上角,offsetX.offsetY就是相对于 ...
HTML 页面中的位置：clientX、screenX、offsetX、pageX
事件中鼠标的 (x,y) 位置 clientX 鼠标相对于浏览器左上角x轴的坐标: 不随滚动条滚动而改变: clientY 鼠标相对于浏览器左上角y轴的坐标: 不随滚动条滚动而改变: pageX 鼠标 ...
图解offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别
offsetX.offsetY: 鼠标相对于事件源元素的X,Y坐标.比如说,我给黄色的盒子定义一个点击事件,则这个offset的坐标原点就在这个黄色盒子的左上角 clientX.clientY: 鼠标 ...
JS之clientX,clientY,screenX,screenY,offsetX,offsetY等区别
1.event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 2.event.p ...

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

pageXOffset 和 pageYOffset

举例

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

最新文章

热门文章