pagex，screenx，clientx的区别

screenX：参照物为电脑的屏幕左上角，距离电脑屏幕的水平距离

clientX：参照物是内容区域左上角，距离内容区域左上角的水平距离，会随着滚动条的移动而移动

pageX：参照物也是内容区域的左上角，距离内容区域左上角的水平距离，但是不会随着滚动条的移动而移动

版权声明：本文为博主原创文章，未经博主允许不得转载。

时间： 2024-10-10 20:45:05

pagex，screenx，clientx的区别的相关文章

图解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

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设置了50px的border,可以看到offsetX的数值未包含左边框的50px.下面看一个行内块的: 可见offsetX/Y为鼠标指针相对于当前元素

screenX clientX pageX的区别

screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照点会随之滚动条的移动而移动. pageX:参照点也是浏览器内容区域的左上角,但它不会随着滚动条而变动 如图(红点就是鼠标当前位置) ' 缩小浏览器窗口就能看出很明显的差别 示例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

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

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

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

1.具体含义见下图1 2.浏览器的兼任情况 原文地址:https://www.cnblogs.com/aiziyouhai/p/9610127.html

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

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

clientX offsetX pageX screenX

一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别 2014-09-14      0个评论    来源:ruoyiqing的专栏 收藏    我要投稿 总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕,于是决定做个图来区分一下(画得我手那个酸呀....) 先总结下区别: event.clientX.event.clientY 鼠标相对于浏览器窗口可视区域的X,Y坐标

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

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

clientX pageX screenX offsetLeft scrollTop

clientX观点:鼠标相对于WINDOWS的坐标.这里这个WINDOWS是指我们能看见的浏览器大小.所以不可能超过显示器的大小,如screen.width,screen.height证明:点击获得clientX,clientY的大小,设置为图片定位的位置.如果上面观点不成立,也就是这个坐标不是浏览器范围内的,例如是相对DOCUMENT的,那么鼠标在很远处点击的时候,你会看到图片跑到鼠标点击的地方,事实上,它起码会保持在浏览器的边上.所以观点成立!通过下面例子说明,鼠标点击获得 <!DOCTYP