layerX layerY offsetX offsetY 的区别

最新推荐文章于 2023-12-14 15:01:27 发布
原创 最新推荐文章于 2023-12-14 15:01:27 发布 · 1.0k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文深入探讨了在CSS中使用层叠样式（position）与偏移量（offsetX, offsetY）的高级应用，详细解释了layerX与layerY用于计算相对定位元素的left和top值，同时介绍了offsetX与offsetY如何精确控制元素相对于其父元素的位置，为网页布局提供更灵活的解决方案。

layerX

layerY 返回的是相对于position:relative,position:absolute的left和top

 

 

 

 

 

offsetX offsetY返回的是相对于当前元素的左上角的left和top

图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
lzding的博客
05-02 5万+
通过 2 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属性的支持：
MoseEvent 中的几种坐标系
知秋
08-15 924
在处理鼠标事件（MouseEvent）时，了解不同的坐标系是非常重要的。常见的坐标系包括屏幕坐标（screen）、客户端坐标（client）、页面坐标（page）、图层坐标（layer），以及偏移坐标（offset）。这些坐标系各自有不同的用途，理解它们的区别有助于我们更精确地处理用户交互事件。本文将深入探讨这些坐标系的含义及其应用场景。
layerX/layerY 和 offsetX/layerY
weixin_33743661的博客
11-09 1029
为什么80%的码农都做不了架构师？>>> ...
FF中的layerX、layerY和IE中的offsetX、offsetY
chaoguo1234的专栏
03-11 367
layerX和layerY以及offsetX和offsetY是来获取相对于触发事件发生的元素上，鼠标的坐标位置的，但是两者却有不同。 下面是测试代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio...
JS获取元素相对于文档的坐标
weixin_34029949的博客
09-26 539
获取元素相对于文档的坐标最简单的方法是用Event对像的offseX/offsetY或layerX/layerY 属性。在实现了offsetX/offxetY这两个属性的浏览器中。获取的坐标都算正常的。可是实现了layerX/layerY 属性 的浏览器中获取的坐标会有一些问题。 在 ie,chrome,opera,firefox,safari 这些主流的浏览器中只有 firefox没实现off...
offsetX,offsetY,layerX,layerY
丑娘娘不丑
09-01 984
当需要取到鼠标点击相对于层的位置信息时，在IE下可以用event.offsetX，event.offsetY；在FF下是event.layerX，event.layerY。 var x=event.offsetX||event.layerX； var y=event.offsetY||event.layerY； 注意：层写好定位，即：position:relative/absolute。
layerX && layerY
weixin_30892763的博客
05-23 679
转载：https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/layerX UIEvent.layerX 　　非标准 　　这个属性是非标准的属性，并且也没有那个标准说要使用它。 　　如果你要使用它，请不要使用在你的Web产品上。那会不对一些用户起作用的。在不同的浏览器上的实现由许多的兼容性问题。 　　而且，这个属性的行为将来还可能...
详解x,offsetX clientX screenX,pageX与y,offsetY clientY screenY,pageY的区别
- `offsetX`和`offsetY`是事件对象（event）的属性，代表了鼠标相对于触发事件元素（target）内部的水平和垂直偏移量。 - 当鼠标点击在目标元素上时，`offsetX`和`offsetY`将给出点击点相对于元素左上角的距离。 - ...
JavaScript中获取鼠标位置相关属性总结
10-25
在现代浏览器中，推荐使用clientX和clientY来获取鼠标在视窗内的位置，使用pageX和pageY来获取鼠标在整个文档中的位置，而对于IE9及更新的浏览器，layerX和layerY是替代offsetX和offsetY的不错选择。在设计跨浏览器...
isTrusted : true altKey : false altitudeAngle : 1.5707963267948966 azimuthAngle : 0 bubbles : true button : 0 buttons : 0 cancelBubble : false cancelable : true clientX : 647 clientY : 293 composed : true ctrlKey : false currentTarget : null defaultPrevented : false detail : 1 eventPhase : 0 fromElement : null height : 1 isPrimary : false layerX : 432 layerY : 15 metaKey : false movementX : 0 movementY : 0 offsetX : 10 offsetY : 4 pageX : 647 pageY : 293 persistentDeviceId : 0 pointerId : 1 pointerType : "mouse" pressure : 0 relatedTarget : null returnValue : true screenX : 647 screenY : 414 shiftKey : false sourceCapabilities : InputDeviceCapabilities {firesTouchEvents: false} srcElement : i.el-icon-view tangentialPressure : 0 target : i.el-icon-view tiltX : 0 tiltY : 0 timeStamp : 3565.7000000029802 toElement : null twist : 0 type : "click" view : Window {window: Window, self: Window, document: document, name: '', location: Location, …} which : 1 width : 1 x : 647 y : 293 [[Prototype]] : PointerEvent altitudeAngle : 1.5707963267948966 azimuthAngle : 0 getCoalescedEvents : ƒ getCoalescedEvents() getPredictedEvents : ƒ getPredictedEvents() height : 1 isPrimary : false persistentDeviceId : 0 pointerId : 1 pointerType : "mouse" pressure : 0 tangentialPressure : 0 tiltX : 0 tiltY : 0 twist : 0 width : 1 constructor : ƒ PointerEvent() Symbol(Symbol.toStringTag) : "PointerEvent" altKey : false bubbles : true button : 0 buttons : 0 cancelBubble : （…） cancelable : （…） clientX : （…） clientY : （…） composed : （…） ctrlKey : （…） currentTarget : （…） defaultPrevented : （…） detail : （…） eventPhase : （…） fromElement : （…） layerX : （…） layerY : （…） metaKey : （…） movementX : （…） movementY : （…） offsetX : （…） offsetY : （…） pageX : （…） pageY : （…） relatedTarget : （…） returnValue : （…） screenX : （…） screenY : （…） shiftKey : （…） sourceCapabilities : （…） srcElement : （…） target : （…） timeStamp : （…） toElement : （…） type : （…） view : Window which : 1 x : 647 y : 293 get altitudeAngle : ƒ altitudeAngle() get azimuthAngle : ƒ azimuthAngle() get height : ƒ height() get isPrimary : ƒ isPrimary() get persistentDeviceId : ƒ persistentDeviceId() get pointerId : ƒ pointerId() get pointerType : ƒ pointerType() get pressure : ƒ pressure() get tangentialPressure : ƒ tangentialPressure() get tiltX : ƒ tiltX() get tiltY : ƒ tiltY() get twist : ƒ twist() get width : ƒ width() [[Prototype]] : MouseEvent没有id字段为什么能获取id
最新发布
10-08
事件冒泡和捕获阶段，target和currentTarget有什么区别？ 3. 如何在事件代理中正确获取目标元素的id？ </think>### MouseEvent 没有 id 字段却能获取 id 的原因 在 JavaScript 事件处理中，**MouseEvent 对象本身...
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
09-03
主要介绍了鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解,需要的朋友可以参考下
关于layerX,layerY
qq807700656的专栏
01-27 1311
当需要取到鼠标点击相对于层的位置信息时，在ie下可以用event.offsetX, evnet.offsetY，在Firefox下是event.layerX, event.layerY。但是firefox下总是有问题，取到的不是相对于层的坐标，而是pageX,pageY。 Google了半天也没有发现什么解决办法，最后在一个网站看到一个例子，原来在层中要设置position为absolute或者r
layer自定义坐标或者相对父级自定义offset 位置
saadah的博客
10-28 5742
layer自定义坐标或者相对父级自定义offset 位置 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我的的项目管理</title> <meta name="renderer" content="webkit"> <m...
小议layerX/Y offsetX/Y 的区别 In Chrome
u013590356的专栏
03-05 1097
大家都知道在chrome中获取鼠标位置信息的途径有很多。有screenX/Y、clinetX/Y、pageX/Y、layerX/Y、offsetX/Y。这里面的区别网上的大神都有很多的阐述了，我就不详细探究了。总结如下： screen是获取鼠标相对于屏幕原点的位置client是获取鼠标相对于页面可视区域原点的位置，因为是相对于可视区域的所有与滚动条无关。page是获取鼠标相对于整个页面的
event对象的clientX,offsetX,screenX,pageX和offsetTop,offsetHeight等等
weixin_34327761的博客
08-06 183
先总结下区别： event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中...
关于layui弹窗中的offset偏移量设置
csy520240的博客
12-14 2217
要设置layer弹出层的位置，可以使用layer的offset属性来进行调整。offset属性接受一个包含top和left属性的对象，用来设置弹出层的偏移量。那比如说想要设置right,bottom的偏移量能不能设置？offset默认情况下不用设置。主要就是 offset: ['auto', 'auto'], 与。
offsetX,offsetY，layerX,layerY
h0322的专栏
08-23 1630
领导让我把一个网站改成firefox下也能用的网站，一个问题好长时间没解决，就是ie下面的offsetX,offsetY,ff下不兼容，网上找了好半天，解决不了，今天无意中在网上看见了layerX,layerY,问题解决了，郁闷。就这么简单，搞了半个星期，唉
关clientHeight，offsetHeight，scrollHeight，offsetTop，clientTop，clientX，offsetX，screenX的区别
weixin_43697050的博客
05-09 402
关于标题里的几个概念，一直模模糊糊，傻傻分不清楚
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值