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 } );