js中事件对象中七种坐标

最新推荐文章于 2023-06-09 01:54:57 发布
最新推荐文章于 2023-06-09 01:54:57 发布
阅读量661 收藏 1
点赞数 2
分类专栏： javascript 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58518380/article/details/121367791
版权

1. clientX  clientY

        相对于浏览器的左上角的xy坐标

        也就是窗口坐标, 不包括工具栏, 滚动条

2.  layerX   layerY

       是鼠标相对于目标元素最近的具有absolute relative的定位元素的位置 包括border

3. movementX movementY

        两个鼠标移动事件间隔时间中当中鼠标移动的相对坐标 

4. offsetx offsetY

        相对于你点击的那个dom节点的左上角的xy坐标

5. pageX pageY

        获取的都是相对于当前浏览器, 也就是文档左上角的xy坐标, 包括了被卷去的body部分的长度

6. screenX screenY

        相对于用户显示器的左上角的xy坐标

7. x  y  和第一个一样的作用

以上抄B站老尚老师的视频

阿妖呀
关注
专栏目录
js事件对象中的七种坐标
m0_51431448的博客
11-23 657
1、 .clientX .clientY //相对于用户浏览器的左上角的xy坐标 //也就是窗口坐标，不包括工具栏、滚动条 2、 .screenX .screenY //相对于用户显示器的左上角的xy坐标 3、 .offsetX .offsetY //相对于你点击的那个dom节点的左上角的x、y坐标 4、 .layerX .layerY //是鼠标相对于目标元素最近的具有absolute/relative的位置，包含border 5、 .movemen.
WebAPI-鼠标事件对象中与坐标相关的属性
weixin_44486539的博客
11-23 284
e.clientX e.clientX 获取鼠标相对于浏览器可视窗口区域的 X 坐标（横坐标） e.clientY e.clientY 获取鼠标相对于浏览器可视区域的 Y 坐标（纵坐标）；鼠标位置未变时坐标不会随页面的滚动而改变 示例： <div></div> <script type="text/javascript"> function $(select...
JavaScript中的坐标
weixin_30512785的博客
07-31 146
基本概念 视口坐标：相对于浏览器左上角或相对于框架页<iframe>元素的坐标，不包括浏览器的“外壳”。 文档坐标：相对于文档左上角的坐标 除IE8及更早的版本，Window对象的pageXOffset和pageYOffset属性在所有的浏览器中提供滚动条的位置。 IE和其他浏览器可以通过scrollLeft和scrollTop属性来获得滚动条的位置。标准模式下，通过docum...
JS中关于坐标的总结
u010780755的博客
03-19 419
MouseEvent screenX: 鼠标相对屏幕的水平位置 screenY clientX：鼠标相对于程序窗口的位置 clientY movementX：与上一个mousemove事件之间的距离 movementY offsetX：鼠标与目标节点左侧padding外边缘的距离 offsetY： PageX：鼠标位置和文档左侧距离 PageY：文档上侧，包含不可见的部分 Element Element.clientHeight:表示元素节点的css高度，包括padding，不包括border和margin
html javascript中的各种坐标
loku1994的博客
09-23 764
HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth  scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度  offs
javascript event对象的clientX,offsetX,screenX,pageX区别
acm765152844的博客
02-22 440
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。
JavaScript获取对象在页面中位置坐标的方法
10-22
JavaScript是一种广泛用于网页开发的脚本语言，它可以通过编程控制网页中元素的各种属性。本文将介绍如何使用JavaScript获取页面中元素的位置坐标。这是一个在进行前端开发，尤其是动态网页设计时，经常会用到的操作...
JavaScript学习笔记之JS事件对象
11-26
JavaScript中的事件对象是编程交互的核心，它记录了与事件相关的各种信息，如事件类型、触发事件的元素、鼠标坐标等。当用户执行某些操作（如点击按钮、移动鼠标）时，浏览器会创建一个事件对象，这个对象包含了这些...
javascript中常用坐标属性
张先生的前端日志
10-13 887
javascript中常用坐标属性 MouseEvent(鼠标事件)属性 都是MouseEvent对象下的属性，必须用该对象调用（只读） MouseEvent：当鼠标事件触发后都会产生此对象，该对象记录着鼠标触发事件时的所有属性 例图： 其常用的坐标属性有： clientX（clientY）   返回当事件被触发时鼠标指针相对于浏览器页面可视区域的水平坐标（left）、垂直坐标（top） 注意： 此属性不论页面是否有滚动条，光标所在浏览器可视区域的位置都是固定的（简单理解为你在浏览器中看到的内容，就是
事件坐标：screenX,clientX,pageX,offsetX的区别
C_Jing_的博客
06-01 768
e.screenX/e.screenY: 事件发生时鼠标相对于电脑屏幕的坐标。e.screenX,e.screenY的最大值不会超过屏幕分辨率。 e.clientX/e.clientY: 事件发生时鼠标在浏览器内容区域的坐标。 ......
javascript判断触发事件event的光标坐标，相对于客户区和屏幕
weixin_33973609的博客
07-31 196
相对于客户区的坐标的使用：   &lt;html&gt;&lt;head&gt;&lt;script type="text/javascript"&gt;function show_coords(event){x=event.clientXy=event.clientYalert("X 坐标: " + x + ", Y 坐标: " + y)}&lt;/script&gt;&
[js点滴]常见的事件位置属性
图解AI
11-06 5417
1.常见的事件位置属性 e.pageX——相对整个页面的坐标 注意:IE6、IE7、IE8无该属性 e.layerX——相对当前坐标系的border左上角开始的坐标 注意：在opera、IE6、IE7、IE8中这个属性，而IE8以上表示相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离 e.offsetX——相对当前坐标系的border左上
js的事件对象获取x，y值
qq_45675876的博客
11-02 1671
没有兼容问题： clientX:事件触发时，鼠标位于视口的横坐标的值 clientY:事件触发时，鼠标位于视口的纵坐标的值 offsetX:事件触发时，鼠标位于元素的横坐标的值（最精确元素） offsetY:事件触发时，鼠标位于元素的纵坐标的值（最精确元素） 有兼容问题 pageX：事件触发时，鼠标位于页面横坐标的值 pageY：事件触发时，鼠标位于页面纵坐标的值 其他 clientWidth...
因为写不出拖拽移动效果，我恶补了一下Dom中的各种距离
最新发布
chengbo_eva的博客
06-09 387
因为写不出拖拽移动效果，我恶补了一下Dom中的各种距离
clientY pageY screenY layerY offsetY的区别
编写博客，学习交流
03-28 1227
clientY 指的是距离可视页面左上角的距离 pageY 指的是距离可视页面左上角的距离(不受页面滚动影响) screenY 指的是距离屏幕左上角的距离 layerY 指的是找到它或它父级元素中最近具有定位的左上角距离 offsetY 指的是距离它自己左上角的距离 相同点 不同点 clientY 距离页面左上角距离 受页面滚动的影响 pageY 距离页面左上角的距离 不受页面滚动影响 相同点 不同点 layerY 距离元
JS——clientX/Y、screenX/Y、pageX/Y、layerX/Y、offsetX/Y的区别
Dream_6666的博客
04-04 575
JS——clientX/Y、screenX/Y、pageX/Y、layerX/Y、offsetX/Y的区别
JS事件简单总结
野草园
03-04 512
这个其实不是很好描述，有可能是由用户发起的，比如鼠标事件，键盘事件，窗口事件，表单事件，也有可能是页面加载资源过程中的事件。常见的事件比如：click, dbclick, keydown, keypress, keyup, mousemove, wheel, scroll, focus, blur, load, unload, abort, error, resize, change, select, submit。
JavaScript事件对象详解：坐标事件属性对比与应用
JavaScript事件对象中的坐标事件是开发者在处理鼠标、触摸和其他交互时至关重要的概念。这些坐标表示了事件发生时，鼠标指针或触点在页面上的位置，对于实现精准的用户界面响应至关重要。本文主要关注于不同浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿妖呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值