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

最新推荐文章于 2024-05-10 17:27:37 发布
最新推荐文章于 2024-05-10 17:27:37 发布
阅读量1.2k 收藏 5
点赞数
分类专栏： 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计算了内容区域及工具栏，滚动条在内的总宽高

丿刘先森
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
event.x,event.clientX,event.offsetX区别
01-19
clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。 offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。 screenX:相对于用户屏幕。测试代码一:[code] <html> <...
javascript Event对象详解及使用示例
12-08
Event代表事件状态，如事件发生的元素，键盘状态，鼠标位置和鼠标按钮状态。... 【event属性】： altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offset
一文吃透offsetX、offsetY、scrollTop、scrollY、scrollHeight、clientX、clientY、pageX、pageY以及类似属性的异同点
weixin_63383437的博客
11-17 1764
offsetX
event事件坐标详解（clientx， offsetx， screenX等）
zlzbt
07-23 7915
鼠标事件（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..
innerWith、outerWidth、clientWidth、offsetWidth、scrollWidth
最新发布
木昆灵寒酥的博客
05-10 221
例如，如果一个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。是用来获取浏览器窗口的宽度的属性.
offsetX各种值总结
风起
08-05 2736
pageX: 页面X坐标位置 pageY: 页面Y坐标位置 screenX: 屏幕X坐标位置 screenY: 屏幕Y坐标位置 clientX: 鼠标的坐标到页面左侧的距离 clientY: 鼠标的坐标到页面顶部的距离 clientWidth：可视区域的宽度 clientHeight：可视区域的高度 offsetX：鼠标坐标到元素的左侧的距离 offsetY：鼠标坐标到元素的顶部的距离 offsetLeft： 该元素外边框距离包含元素内边框左侧的距离 offsetTop：该元素外边框距离包含元素内
JS -获取屏幕/浏览器高度
kelly0721的博客
12-07 9122
一、展示图 二、屏幕信息 window.screen.height：设备显示屏的高度 这个是设备显示屏的高度，各个机型的显示屏高度都不一样，可以在系统设置中看 window.screen.availHeight：屏幕的可用高度 一般是显示屏高度减去显示屏工具栏的高度 任务栏高度 = screen.height - screen.availHeight 三、浏览器信息 window.ou...
offsetX和offsetLeft
weixin_52512511的博客
07-17 318
注意：offsetLeft和offsetWidth都是dom元素上的属性，而offsetX是function上event的属性。offsetX和offsetY表示（鼠标位置）相对于最近父级元素的坐标（无论父级是否定位）（不管是谁触发）相对于最近定位父级元素的坐标，若在所有的父级上都没有定位，则相对于整个文档。（暂时还没学到offsetWidth，以后再补充）
浅谈clientX、offsetX、screenX、pageX
漫磋嗟
10-24 2612
clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。 screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。 pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
图解offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别
逆风优雅的博客
06-10 5122
offsetX、offsetY: 鼠标相对于事件源元素的X,Y坐标。比如说，我给黄色的盒子定义一个点击事件，则这个offset的坐标原点就在这个黄色盒子的左上角 clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。 pageX、pagey: 事件发生时鼠标相对于整个页面的坐标。整个页面是说整个网页的区域。 pageX=clientX+横向滚动区域(如果有滚动条) pagey=clienty+纵向滚动区域(如果有滚动条) s...
js中offset、client、scroll、screen、page用法
CYL_2021的博客
04-26 1598
一.offset offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移），大小等 获取元素距离带有定位父元素的位置 获取元素自身的大小（宽度高度） 注意：返回值都不带单位 常用属性： 1.1 offsetX，offsetY 获取鼠标指针位置相对于触发事件的对象的 x 坐标和y坐标。offsetX （offsetY）规定了事件对象与目标节点的内填充边（padding edge）在 X （Y）轴方向上的偏移量。 2.2 offsetWidth，offsetHe
three.js实现点击事件（vue）
lidaima的博客
03-15 4348
three.js 实现点击事件(Vue)。
javascript坐标：event.x、event.clientX、event.offsetX、event.screenX 用法
andyfu57的专栏
05-05 830
clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y
window.innerWidth以及window.outerWidth的区别
sinat_32067081的博客
11-06 7442
window.outerWidth获取浏览器窗口外部的宽度。 它表示整个浏览器窗口的宽度，包括边栏 window.innerWidth获取浏览器可视区域的宽度，也就是页面的宽度<!DOCTYPE html> <html> <body><p id="demo"></p><script> var w = window.innerWidth || document.documentElement.cli
浏览器兼容event.offsetX的方法
weeqe的博客
11-07 1312
火狐浏览器不支持e.offsetX，解决方法function getOffsetX(e){ var e =e||window.event; var srcObj = e.target || e.srcElement; if (e.offsetX){ return e.offsetX; }else{ var rect = srcObj.g
Js中event对象的x,clientX,offsetX区别
yinyiniao(Leo)'s blog
01-16 9021
 Js中event对象的x,clientX,offsetX三者主要区别含义如下：x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。  clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。  offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。  screenX:相对于用户屏幕。
javascript中一些相对位置
兔子juan的博客
07-27 877
scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:...
pageX offsetX screenX
07-27
这些是JavaScript中的一些属性，用于获取鼠标事件的相关信息。 - pageX：鼠标事件相对于整个文档页面的水平坐标。 - offsetX：鼠标事件相对于事件目标元素的水平坐标。 - screenX：鼠标事件相对于用户屏幕的水平坐标。 这些属性可以在处理鼠标事件时使用，以获取鼠标位置的相关信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值