clientX, clientY,offsetX, offsetY, screenX, screenY, x,y的区别

最新推荐文章于 2023-11-17 01:55:00 发布
最新推荐文章于 2023-11-17 01:55:00 发布
阅读量780 收藏 1
点赞数
文章标签： 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/klts120/article/details/1671577
版权
clientX,   clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0,   clientY=0；  
  offsetX,   offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0,   offsetY=0；  
  screenX,   screenY是相对于用户显示器的位置  
  x,y是鼠标当前相对于当前浏览器的位置 
klts120
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
event.X和event.clientX的区别分析
09-05
在处理鼠标事件时，我们常常会遇到`event.X`和`event.clientX`这两个属性，它们都是用来获取鼠标位置的，但有微妙的差别。 `event.clientX`属性返回的是鼠标指针在浏览器的可视窗口（客户区域）内的X坐标，不包括...
offsetX/offsetY、clientX/clientY和screenX/screenY
吞吞吐吐屠屠兔兔的博客
05-05 518
offsetX offsetY等总结
meiyaohuhu的博客
07-28 1163
offsetLeft该元素外边框距离包含元素内边框左侧的距离。offsetTop该元素外边框距离包含元素内边框顶部的距离。clientX鼠标的坐标到页面左侧的距离。clientY鼠标的坐标到页面顶部的距离。offsetX鼠标坐标到元素的左侧的距离。offsetY鼠标坐标到元素的顶部的距离。clientHeight可视区域的高度。screenX屏幕X坐标位置。screenY屏幕Y坐标位置。pageX页面X坐标位置。pageY页面Y坐标位置。...
js event事件clientX clientY offsetX offsetY pageX pageY layerX layerY screenX screenY属性
persist_z的博客
02-24 682
在js的获取鼠标位置当中大概有clientX clientY offsetX offsetY pageX pageY layerX layerY screenX screenY这几种属性，下面是我个人对于这些属性的一些理解： 首先实例代码是这样的 *{ margin: 0; padding: 0; } .wrap{ width: 100px; heig...
关于offsetX、offsetY、clientX、clientY、pageX、pageY、screenX、screenY的区别
LennieGao的博客
01-24 269
好好学习 ，天天向上。Are you ready? offsetX、offsetY: 鼠标相对于事件源元素（srcElement）的X,Y坐标 clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。 pageX、pagey: 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不...
图解offsetX、offsetY和clientX、clientY和pageX、pageY和screenX、screenY的区别
逆风优雅的博客
06-10 5240
offsetX、offsetY: 鼠标相对于事件源元素的X,Y坐标。比如说，我给黄色的盒子定义一个点击事件，则这个offset的坐标原点就在这个黄色盒子的左上角 clientX、clientY: 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。 pageX、pagey: 事件发生时鼠标相对于整个页面的坐标。整个页面是说整个网页的区域。 pageX=clientX+横向滚动区域(如果有滚动条) pagey=clienty+纵向滚动区域(如果有滚动条) s...
鼠标事件clientX、clientY
04-21
clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY
JS中坐标表示方法的异同
03-17
`screenX`和`screenY`表示鼠标相对于屏幕左上角的X轴和Y轴的位置。这里的屏幕指的是用户的显示器屏幕。 **特点：** - **屏幕坐标系**：`screenX`和`screenY`是从屏幕的左上角开始计算的。 - **分辨率限制**：`...
JavaScript中获取鼠标位置相关属性总结
10-25
- Firefox不支持offsetX、offsetY以及x、y属性，但是可以通过layerX和layerY属性来替代。 - IE中的x、y属性相当于Firefox和Chrome中的layerX和layerY属性。 - IE7和IE8不支持pageX和pageY属性，而且其document的边界...
让Firefox支持offsetX、offsetY
weixin_34176694的博客
07-21 188
//计算光标相对于第一个定位的父元素的坐标 function coordinate(e){ var o = window.event || e, coord, coord_X, coord_Y; coord_X = (o.offsetX === undefined) ? getOffset(o).X : o.offsetX; coo...
一文吃透offsetX、offsetY、scrollTop、scrollY、scrollHeight、clientX、clientY、pageX、pageY以及类似属性的异同点
最新发布
weixin_63383437的博客
11-17 2129
offsetX
JavaScript 中一些概念理解 ：clientX、clientY、offsetX、offsetY、screenX、screenY
甜心的专栏
11-11 7081
clientX：设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY： 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX： 设置或获取鼠标指针位置相对于触发事件的（this）对象的 x 坐标。 offsetY ：设置或获取鼠标指针位置相对于触发事件的（this）对象的 y 坐标。 screenX： 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 screenY： 设.
css之旅（四）坐标系介绍
letianxf的博客
04-05 785
本文介绍了css坐标系相关
JavaScript窗口功能指南之发挥窗口特征
hktl的专栏
03-22 924
JavaScript窗口功能指南之发挥窗口特征（作者：听风编译　2001年01月19日 11:35）　　在前面一节中，我们全面接触了JavaScript提供的窗口特征。许多这些特征是基于特殊浏览器的，就是说它们不可能同时在Internet Explorer和Navigator中工作。在这一节中，我们将探索几个有趣的方面，以及一些有用的技巧。 指定窗口尺度 　　我们使用参数height、 width
对于clientX、clientY、offsetX、offsetY、pageX、pageY的理解
qq_41445106的博客
07-16 1123
对于clientX、clientY、offsetX、offsetY、pageX、pageY的理解 首先声明一下这几个都是和事件相关的属性 1.clientX、clientY属性：鼠标在可视区X坐标和Y坐标，即距离左边框和上边框的距离 2.screenX、screenY属性：鼠标在屏幕区X坐标和Y坐标，即距离左屏幕和上屏幕的距离 3.offsetX、offsetY属性：鼠标相对于事件源的X坐标和Y坐...
JavaScript中pageX pageY offsetX offsetY区别
onion_line的博客
03-14 5893
IE下没有pageX,pageY这两个属性  pageX pageY:鼠标指针的位置，文档的坐标。offsetX offsetY:鼠标相对于事件源元素的x,y坐标
JS之clientX,clientY,screenX,screenY,offsetX,offsetY区别测试
热门推荐
每天进步一点点
05-09 6万+
首先需要知道clientX,clientY,screenX,screenY,offsetX,offsetY 是鼠标事件对象下的几个属性， 之前也一直对这些属性搞的稀里糊涂，看文档上说的也是不太理解，反正看完一头雾水，所以自己动手亲自测试了一下；说一下自己的理解； clientX,clientY,screenX,screenY,offsetX,offsetY 这几个属性是“鼠标事件对象”下的属性
补全下面的html和css代码，实现这个功能可以分为两个步骤： 实现小球的拖拽 可以通过监听小球的mousedown、mousemove和mouseup事件，实现小球的拖拽。具体实现方法如下： 复制 var ball = document.getElementById("ball"); var container = document.getElementById("container"); var isDragging = false; var offsetX = 0; var offsetY = 0; ball.addEventListener("mousedown", function(e) { isDragging = true; offsetX = e.offsetX; offsetY = e.offsetY; }); document.addEventListener("mousemove", function(e) { if (isDragging) { var x = e.clientX - offsetX; var y = e.clientY - offsetY; ball.style.left = x + "px"; ball.style.top = y + "px"; } }); document.addEventListener("mouseup", function() { isDragging = false; }); 判断小球是否移动到框里 可以通过判断小球是否与框的边界相交，来判断小球是否移动到框里。具体实现方法如下： 复制 var ballRect = ball.getBoundingClientRect(); var containerRect = container.getBoundingClientRect(); if ( ballRect.left >= containerRect.left && ballRect.right <= containerRect.right && ballRect.top >= containerRect.top && ballRect.bottom <= containerRect.bottom ) { // 小球在框里 } else { // 小球不在框里 } 把这两个步骤结合起来，就可以实现拖拽小球移动到框里的功能了。
05-28
var x = e.clientX - offsetX; var y = e.clientY - offsetY; ball.style.left = x + "px"; ball.style.top = y + "px"; } }); document.addEventListener("mouseup", function() { isDragging = false; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值