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作用相同,但是只有IE支持。
$(window).scrollTop():返回的是浏览器右边的滚动条滚动的距离;

所以:e.pageY=e.pageY||e.clientY+$(window).scrollTop();  //兼容性的写法

下面说一下关于.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} );
时间: 2024-08-23 22:41:46

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

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

关于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个属性不是标准属性,但得到了广

javascript中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX

offsetWidth       //返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) offsetHeight      //返回元素的高度(包括元素高度.内边距和边框,不包括外边距) clientWidth        //返回元素的宽度(包括元素宽度.内边距,不包括边框和外边距) clientHeight       //返回元素的高度(包括元素高度.内边距,不包括边框和外边距) style.width         //返回元素的宽度(包括元素宽度,不包括内边距.边框和外

JS之clientX,clientY,screenX,screenY,offsetX,offsetY

clientX:当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等),鼠标相对于浏览器(这里说的是浏览器的有效区域)x轴的位置: clientY:当鼠标事件发生时,鼠标相对于浏览器(这里说的是浏览器的有效区域)y轴的位置: screenX:当鼠标事件发生时,鼠标相对于显示器屏幕x轴的位置: screenY:当鼠标事件发生时,鼠标相对于显示器屏幕y轴的位置: offsetX:当鼠标事件发生时,鼠标相对于事件源x轴的位置 offsetY:当鼠标事件发生时,鼠标

offsetX、clientX、screenX、pageX、layerX

pageX/Y 相对于文档窗口左上角 offsetX/Y 相对于触发事件元素的左上角,需要注意的是,offset是有负值的,如果你的元素有边框,那么offset会是负值. (测试了IE11.Opera54.0.2952.71.Chrome68.0.3423.2.Firefox61.0.2中offset均不含边框的宽度) clientX/Y 相对于可视窗口左上角 screenX/Y 相对于屏幕左上角 layerX/Y 相对于position为absolute或relative的父元素的左上角 pa

JavaScript中event的x,clientX,offsetX的区别

JavaScript中event的x,clientX,offsetX的区别 请看下面的文字说明,也就是event中x,clientX,offsetX,screenX的区别: x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置.www.mlybyby.com clientX:相对于客户区域的x坐标位置,不包括滚动条,就是正文区域. offsetx:设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置. screenX:相对于用户屏幕. 同时你可以对比下面代码分析 Cl

这样理解比较好吧(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:望文生义,相对于浏览器而言的,随滚动条移

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

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

一文看懂js中的clientX,clientY,pageX,pageY,screenX,screenY

一. 客户区坐标位置(clientX,clientY) 鼠标事件都是在浏览器视口中的特定位置发生的.这个位置信息保存在事件对象的clientX和clientY属性中,所有浏览器都支持这两个属性. 我们知道了这个位置信息我们可以做些什么了?举个例子,有时候我们需要获取鼠标在某一个元素中的相对位置,做一些事情,比如自定义拖动条. 案例代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse