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

pageX，clientX，screenX，offsetX的区别

pageX/pageY: 鼠标相对于整个页面的X/Y坐标,但IE不支持.以body元素为参考点. clientX/clientY: 鼠标在浏览器内容区域的X/Y坐标,不包含滚动条,即需要滚动条的地方不算.浏览器窗口缩小时,clientX/clientY的最大值也会缩小.以浏览器左上角为参考点,所以不包括滚动距离. screenX/screenY: 鼠标在屏幕上的坐标,最大值不超过屏幕分辨率.以屏幕为参考点. offsetX/offsetY: 针对IE用的pageX/pageY. event.cl…

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作用相同,但是…

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

首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性. 之前也一直对这些属性搞的稀里糊涂,看文档上说的也是不太理解,反正看完一头雾水,所以自己动手亲自测试了一下:说一下自己的理解:clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性,所以必然是“鼠标事件”发生时候才会有意义: clientX:当鼠标事件发生时(不管是onclick,还是…

pageX、clientX、screenX、offsetX、layerX、x

参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX--相对整个页面的坐标e.layerX--相对当前坐标系的border左上角开始的坐标e.offsetX--相对当前坐标系的border左上角开始的坐标e.clientX--相对可视区域的坐标e.x--相对可视区域的坐标 ff: e.pageX--相对整个页面的坐标e.layerX--相对当前坐标系的border左上角开始的坐标e.offs…

【转】pageX、clientX、screenX、offsetX、layerX、x

参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系的border左上角开始的坐标e.offsetX——相对当前坐标系的border左上角开始的坐标e.clientX——相对可视区域的坐标e.x——相对可视区域的坐标 ff: e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系的border左上角开始的坐标e.offs…

[转]pageX、clientX、screenX、offsetX、layerX、x

参考:http://www.cnblogs.com/xesam/archive/2011/12/08/2280509.html chrome: e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系的border左上角开始的坐标e.offsetX——相对当前坐标系的border左上角开始的坐标e.clientX——相对可视区域的坐标e.x——相对可视区域的坐标 ff: e.pageX——相对整个页面的坐标e.layerX——相对当前坐标系的border左上角开始的坐标e.offs…

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

原文:https://www.cnblogs.com/ifworld/p/7605954.html 元素宽高 offsetWidth //返回元素的宽度(包括元素宽度.内边距和边框,不包括外边距) offsetHeight //返回元素的高度(包括元素高度.内边距和边框,不包括外边距) clientWidth //返回元素的宽度(包括元素宽度.内边距,不包括边框和外边距) clientHeight //返回元素的高度(包括元素高度.内边距,不包括边框和外边距) style.width //返回元…

元素位置pageX,pageY,clientX,clientY,scrollX,scrollY,screenX,screenY,offsetX,offsetY

总结: event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标,其中客户区域不包括窗口自身的控件和滚动条. (可见区域)event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标. (触发事件的元素,ie,chrome支持此属性,ff不支持)event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y…

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为absolu…

JS-特效 ～ 03. 楼层跳跃、事件对象event的获取与使用、event的主要内容、screenX、pageX、clientX的区别、放大镜、模拟滚动条

楼层跳跃 100%子盒子会继承父盒子的宽高.父盒子继承body宽高.Body继承html的宽高. 盒子属性:auto:适应盒子自身的宽度或者高度.(对自己负责) 盒子属性:100%:适应盒子父盒子的宽度或者高度.(对爸爸负责) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <st…