event对象的offsetX、clientX、pageX、screenX及 window.innerWidth、outerWidth使用详解

最新推荐文章于 2024-05-10 17:27:37 发布
最新推荐文章于 2024-05-10 17:27:37 发布
阅读量1.3k 收藏 6
点赞数
分类专栏： JavaScript 文章标签： javascript offsetX clientX screenX pageX
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lwx931449660/article/details/106073426
版权

目录

 offset 

 client

 screen

  page

  window.innerWidht

offset 

offsetX、offsetY为当前鼠标点击位置距离当前元素参考原点（左上角）的距离，而不同浏览器参考原点的位置不尽相同，FF及Chrome中参考原点为内容区域左上角，不包含元素边框

  • offsetX      鼠标当前点击位置距离当前点击元素内容区域最左边（不包含边框）的距离
  • offsetY      鼠标当前点击位置距离当前点击元素内容区域最上边（不包含边框）的距离

   点击不同位置，参考原点不同，则距离不同 

以下四个点可供理解offset的相对位置及尺寸

 client

clientX、clientY为当前鼠标点击位置距离浏览器显示内容窗口左上角的距离，总是获取当前点击位置距离窗口左上角的距离

  • clientX      鼠标当前点击位置距离浏览器窗口内容区域最左边的距离
  • clientY      鼠标当前点击位置距离浏览器窗口内容区域最上边的距离

    点击不同位置，参考点不会改变 

以下3个点可供参考client的相对位置及尺寸

 screen

screenX、screenY为鼠标当前点击位置距离电脑桌面左上角的距离，总是参考桌面进行定位，获取尺寸。

  • screenX      鼠标当前点击位置距离桌面窗口最左边的距离
  • screenY      鼠标当前点击位置距离桌面窗口最上边的距离

如图解释

 

page

pageX、pageY和clientX、clientY很相似，但是不同点在于：

  • pageX      pageX = clientX + 横向滚动距离
  • pageY      pageY = clientY + 纵向滚动距离

 

window.innerWidht   window.innerHeight

  • window.innerWidth       返回当前浏览器可视内容区域的宽度
  • window.innerHeight      返回当前浏览器可视内容区域的高度

当进行浏览器窗口缩放时，会改变当前浏览器可视内容区域的尺寸，影响window.innerWidth、window.innerHeight的大小

 

outerWinth、outerHeight与innerWidth、innerHeight的区别在于outerWidth计算了内容区域及工具栏，滚动条在内的总宽高

丿刘先森
关注
专栏目录
js 获取元素位置和大小_js 位置_Js宽度高度（详解）
天马3798
12-10 3705
如obj.style.top、obj.style.wdith等，在读的时候，他们返回的值常常是带有单位的(如px)，同时，对于这种方式，它只能够获取到该元素的行内样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值得时候和以上只读属性的区别，要获取计算好的样式，请使用obj.currentstyle（IE）和getComputedStyle(IE之外的浏览器)。该属性指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度，即滚动条宽高度。
20-jQuery-标签处理BOM/DOM操作、事件对象
fafaffafaff的博客
09-30 184
1、标签样式处理 (1)样式设置 2、BOM操作 3、DOM操作 (1) 创建标签 (2) 插入标签 (3) 删除标签 (4) 替换标签 (5) 克隆标签/复制标签 4、事件对象 (1) 事件对象 (2) 事件绑定 (3) 事件取消 5、综合案例和练习 1、标签样式处理 (1)样式设置 jQuery提供了样式设置函数，用于获取/设置单个/多个样式 ​selector：选择器 $(selector).css(name.
event对象的offsetX, clientX, pageX, screenX
hardly555的博客
11-01 937
现在需要对event对象的几大与坐标有关的属性做一个总结，以便于认识 offsetX|offsetY offsetX/Y获取到是触发点相对被触发dom的左上角距离(包括padding在内，不包括border)，不过左上角基准点在不同浏览器中有区别，以内容区左上角为基准点（不包括边框），如果触发点在边框border上会返回负值。 用途：待发现 clientX|clientY和pageX|pageY clientX|clientY这对坐标相对于窗口，从窗口的顶部/左侧边缘计算得出，类似于cs.
event.offsetX ,事件
qq_45505241的博客
11-07 2478
window.innerWidth以及window.outerWidth的区别
sinat_32067081的博客
11-06 7583
window.outerWidth获取浏览器窗口外部的宽度。 它表示整个浏览器窗口的宽度，包括边栏 window.innerWidth获取浏览器可视区域的宽度，也就是页面的宽度<!DOCTYPE html> <html> <body><p id="demo"></p><script> var w = window.innerWidth || document.documentElement.cli
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
09-05 358
通过 3 张图和 1 张表格，轻松区别JavaScriptEvent 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 一、测试代码如下： <!DOCTYPE HTML> <html lang="zh-cn"> <head> <meta charset="utf-...
事件的offsetX属性
刘利新西安
06-13 748
Sets or retrieves the x-coordinate of the mouse pointer relative to the top-left corner of the offsetParent element of the element that fires the event. Use the srcElement property to get the element
自学js第十五天:event坐标偏移量位置和window对象
weixin_47592060的博客
05-07 1632
一.Event对象集合中的鼠标按下或者点击时的相对位置:!=元素的自身位置 1.鼠标event对象给我们展示了 client / offset / page / screen系列的X Y坐标 可以用于在不同需求下获取用户鼠标的相对位置.(相对于各种参考物体的位置) 2.首先先了解鼠标event其实是一个事件对象集合来的,里面包含各种各样的鼠标事件的信息.其中就有当前用户点击鼠标触发事件的相对位置坐标. 比如如下的pageX,和 pageY [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来
JS中的offsetWidth, clientWidth, scrollWidth, innerWidth, outerWidth, pageXOffset
yleave的博客
02-13 422
value description offsetWidth 返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight 返回元素的高度（包括元素高度、内边距和边框，不包括外边距） clientWidth 返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） clientHeight 返回元素的高度（包括元素高度、内边距，不包括边框和外边距...
javascript获取网页各种高宽及位置的方法总结.docx
01-18
- **`window.outerWidth`** 和 **`window.outerHeight`**：分别表示浏览器窗口本身的宽度和高度，包括滚动条、工具栏等在内的整个浏览器窗口的尺寸。 #### 盒模型与元素尺寸 - **默认盒模型**：`box-sizing: ...
event.x,event.clientX,event.offsetX区别
01-19
x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。 clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。 offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。测试代码一:[code] <html> <head> </head> [removed] function reload(){ [removed].reload(“//www.jb51.net”); } [removed] <body> <table> <TR><TD><input type=”button” name=”bu
JS图解event.offsetX，event.clientX，event.pageX，event.screenX
hys__handsome的博客
10-25 547
浏览器对象属性 window.innerWidth 和 window.outerWidth 这两个宽度属性有何区别？
汪子熙的专家技术分享
03-27 1879
window.outerWidth: 表示浏览器窗口的外部宽度，即整个浏览器窗口的宽度，包括滚动条、边框和窗口周围的任何其他元素。这个宽度是整个浏览器窗口的宽度，包括浏览器窗口自身的宽度、浏览器菜单栏、工具栏、状态栏以及其他附加组件的宽度。window.innerWidth: 表示浏览器窗口的内部宽度，即可视区域的宽度。换句话说，window.innerWidth 只是浏览器窗口内部可见区域的宽度，而 window.outerWidth 是整个浏览器窗口的宽度，包括任何边框、滚动条和其他窗口元素。
Window的scrollX、innerWidth、outerWidth
FEE
08-03 1120
1.window.scrollX 返回文档/页面水平方向滚动的像素值。示例：// 如果 scrollX 大于 200，则把文档重新滚动到左上角。 if (window.scrollX > 200) { window.scroll(0,0); }备注：pageXOffset属性是scrollX属性的别名window.pageXOffset == window.scrollX; // 总是 tr
event事件坐标详解（clientx， offsetx， screenX等）
zlzbt
07-23 8422
鼠标事件（e=e||window.event） event.clientX、event.clientY (相对浏览器窗口) //鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 function getMousePos(event) { var e = event || window.event; return {'x':e.clientX,'y':clientY} } clientX与client..
web前端面试-- window.innerWith、window.outerWidth、clientWidth、offsetWidth、scrollWidth的区别
Penk的博客
11-06 1259
它是元素内容区域的宽度，可以通过CSS的width属性来设置。例如，如果一个div元素的宽度为200px，内边距为10px，那么它的clientWidth就是200px - 2 * 10px = 180px。
javascript坐标：event.x、event.clientX、event.offsetX、event.screenX 用法
andyfu57的专栏
05-05 845
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y
innerWith、outerWidth、clientWidth、offsetWidth、scrollWidth
最新发布
木昆灵寒酥的博客
05-10 472
例如，如果一个div元素的宽度为200px，内边距为10px，边框为1px，那么它的offsetWidth就是200px + 2 * 10px + 2 * 1px = 222px。例如，如果一个div元素的宽度为200px，内边距为10px，边框为1px，，那么它的clientWidth就是200px + 2 * 10px= 220px。例如，如果一个div元素的宽度为200px，内边距为10px，内容区域的宽度为300px，那么它的scrollWidth就是300px。是用来获取浏览器窗口的宽度的属性.
区分event对象中的clientX,offsetX,screenX,pageX
weixin_45822952的博客
09-15 191
1.clientX和clientY 指的是客户端的窗口就是指浏览器的显示页面内容的窗口大小。（不包括浏览器的工具栏，导航栏等） 2.offsetX和offsetY 被点击的元素距离左上角为参考原点的长度，而IE,FF和Chrome的参考点有所差异 在谷歌浏览器下 offsetX offsetY是包含边框 3.screenX和screenY 是用来获取鼠标点击位置到屏幕显示器的距离，距离的最大值要根据屏幕分辨率的尺寸来计算 4.pageX和pageY 页面的高度一般情况client浏览器显示区
JavaScript深入理解window.event事件
<body onmousemove="window.status='X=' + event.clientX + ' Y=' + event.clientY"> ``` 3. **注意事项**： - 不是所有浏览器都支持`window.event`，尤其是非IE浏览器。在现代浏览器中，事件作为参数传递给...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值