clientX .offsetX .screenX x 的区别

【clientX .offsetX .screenX x 的区别】的更多相关文章

clientX .offsetX .screenX x 的区别

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

一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY 类似于event.clientX.event.clientY,但它们使用的是文档坐标而非…

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别

通过 3 张图和 1 张表格,轻松区别 JavaScript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性. 一.测试代码如下: <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>Javascript</title> <st…

offsetHeight,scrollHeight,clientHeight,scrollTop以及pageX,clientX,offsetX,screenX,offsetLeft,style.left等的区别以及使用详解

一.写在前面在阅读本文前,希望大家能针对每个属性亲手测试,网上现有的大量相关博客都有不等的概念错误,毕竟亲手实践才能更好的掌握这些概念. 1.pageX,clientX,screenX与offsetX 先统一了解下这四个概念,理解不透没关系,咱们把概念相近的对比着一一细说. pageX:鼠标指针距离文档X轴左侧边缘的距离,不随滚动条变化而变化 clientX:鼠标指针距离可视窗口左侧边缘的距离,随着滚动条变化而变化 screenY:鼠标指针距离屏幕的距离(包括浏览器工具栏之类),不随滚动条变化…

clientX,offsetX,screenX,pageX 区别！

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

pageX,clientX,offsetX,screenX,offsetLeft,style.left,offsetWidth,scrollWidth的区别以及使用详解

https://www.cnblogs.com/echolun/p/9231760.html…

event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等

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

event对象的clientX,offsetX,screenX,pageX

chrome: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——相对当前坐标系的border左上角开始的坐标 e.clientX——相对可视区域的坐标 e.x——相对可视区域的坐标 ff: e.pageX——相对整个页面的坐标 e.layerX——相对当前坐标系的border左上角开始的坐标 e.offsetX——无 e.clientX——相对可视区域的坐标 e.x——无 opera: e.pageX——相对整个页面的…

[1]区分event对象中的[clientX,offsetX,screenX,pageX]

前言在平时的开发中,非常讨厌的就是兼容性了,兼容性的问题总会让我们记忆混淆,所以这次来区分一下event对象中的常用获取鼠标位置. clientX clientY event.clientXevent.clientY client直译就是客户端,客户端的窗口就是指游览器的显示页面内容的窗口大小(不包含工具栏.导航栏等等). event.clientX.event.clientY就是用来获取鼠标距游览器显示窗口的长度. client范围兼容性:IE和主流游览器都支持. offsetX offs…

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

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

event对象中offsetX,clientX,pageX,screenX的区别

1.offsetXoffset意为偏移量,是事件对象距左上角为参考原点的距离.以元素盒子模型的内容区域的左上角为参考点.不包括border.2.clientX事件对象相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条3.pageX事件对象相对于整个文档的坐标以像素为单位.4.screenX事件对象相对于设备屏幕的左上角的坐标,当改变屏幕的分辨率的时候,坐标会随之改变. 以上除了screenX/Y以设备像素为单位,其他都是以css像素为单位下面以一个实例来解释说明 <!…

pageX,clientX,offsetX,layerX的区别

pageX,clientX,offsetX,layerX的区别在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_<John Resig大神说过,动态元素有3个至关重要的元素,位置,尺寸和可见性.所以,今天,先拿几个页面位置属性开刀.一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化c…

clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解

clientX,offsetX,layerX,pageX,screenX,X有时容易记混,通过测试当前的主流浏览器疏理了自己的一些看法以供参考. Chrome下(测试版本为51.0.2704.106 ): 由上图可见题目中的6种属性可分为三大类: 1.鼠标指针相对于屏幕的坐标:screenX/Y 2.相对于页面且不考虑滚动条是否滚动:clientX/Y,X/Y 3.相对于页面且考虑滚动条:pageX/Y,layerX/Y,offsetX/Y 下面着重讨论2,3. 红色对应上文的2类.div3设置…

pageX,clientX,offsetX,layerX的那些事

在各个浏览器的JS中,有很多个让你十分囧的属性,由于各大厂商对标准的解释和执行不一样,导致十分混乱,也让我们这些前端攻城狮十分无语和纠结>_< John Resig大神说过,动态元素有3个至关重要的元素,位置,尺寸和可见性.所以,今天,先拿几个页面位置属性开刀. 一.PageX和clientX PageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域…

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…

pageX, clientX ,screenX, offsetX, layerX, ,x的区别

事件对象event的位置属性,这些参数比较容易混淆 1. pageX,pageY :IE不识别的,鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化,其实就是clientY+scrollTop,参考点是页面 2. clientX ,clientY: 鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化. 这是一个变化的,是以浏览器左上角为参考点 3. screenX, screenY : 鼠标相对…

javascript 中 x offsetX clientX screenX pageX的区别

在javascript的事件对象中的关于事件鼠标位置的几个属性(x, pageX, offsetX, scrrenX clientX)及(y, pageY, offsetY, screenY, clientY), 其中offsetX, offsetY是指相对于触发事件元素的左上角的偏移.但在不同的浏览器中其值又有所不同.在chrome opera, safari中是指外边缘,即把该元素边框的宽度计算在内,firefox ie则不包含边框值.如下图(一个具有蓝色边框的div)所示. layerX…

一张图看懂offsetX, clientX, pageX, screenX的区别

1.具体含义见下图1 2.浏览器的兼任情况…

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…

jQuery中 pageX,clientX,offsetX,layerX的区别

一.PageX和clientXPageX和clientX ,这个两个比较容易搞混,PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化.可以理解为:相对#(0.0)坐标绝对定位clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化.可以理解为:相对可视化左上角坐标绝对定位如图:(小黑点为点击坐标) 二.screenXscreenX:鼠标在屏幕上的位置,从屏幕左上角开始,这个…

【转】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…

ev的offsetX,pageX,clientX和screenX

event.offsetX.event.offsetY(相对事件发生的具体元素左上角的定位) 鼠标相对于事件源元素(srcElement)的X,Y坐标,只有IE事件有这2个属性,标准事件没有对应的属性. event.clientX.event.clientY(相对可视区域左上角的绝对定位) 鼠标相对于浏览器窗口可视区域的X,Y坐标(窗口坐标),可视区域不包括工具栏和滚动条.IE事件和标准事件都定义了这2个属性 event.pageX.event.pageY(整个HTML文档中的绝对定位) 类似于…

[转]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…

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…

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

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

【前端】screenX/Y, clientX/Y, pageX/Y 的区别

一图胜千言. 做了一个图:…

页面元素坐标和偏移（clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等）相关整理

鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆,所以整理在这里,备忘,待查. 1.客户区坐标位置(clientX/clientY) 我们可以通过event事件对象的clientX/clientY属性获得事件发生时鼠标指针在视口中的水平和垂直坐标. 示意图: 2.屏幕坐标位置(screenX/scrennY) 通过event事件对象的screenX…