event.clientX、clientY、x、y、offsetX、offsetY、screenX、区别

最新推荐文章于 2024-11-12 08:18:23 发布
最新推荐文章于 2024-11-12 08:18:23 发布
阅读量248 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： js 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mememama111/article/details/84400160
本文深入解析了JavaScript中坐标获取的原理与应用，通过实例展示了window.event对象中关键属性的含义，包括clientX、clientY、offsetX、offsetY、screenX、screenY等，帮助开发者准确理解并运用这些坐标值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在Javascript中，坐标的获取让人头晕，下面这段代码较好地演示了上述各个参数的含义：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 坐标位置</TITLE>
<style>
*{
margin:0}
#d1{
position:absolute;
left:50px;
top:50px;
border:1px blue solid;
}

</style>
</HEAD>

<SCRIPT>  
function   dullwolf()   {
if (!document.all)
      var evt=arguments[0];
else
      var evt=event;
p1.innerText=window.event.x;  
p2.innerText=window.event.y;  
p3.innerText=window.event.clientX;  
p4.innerText=window.event.clientY;  
p5.innerText=window.event.offsetX;  
p6.innerText=window.event.offsetY;  
p7.innerText=window.event.screenX;  
p8.innerText=window.event.screenY;  
}  
     
</SCRIPT>    
<body onmousemove="dullwolf();">  
<div id="d1">
event.x=<span   id="p1">   </span>;  
event.y=<span   id="p2">   </span>;  
clientX=<span   id="p3">   </span> ;
clientY=<span   id="p4">   </span> ; <br>
offsetX=<span   id="p5">   </span> ;
offsetY=<span   id="p6">   </span> ;
screenX=<span   id="p7">   </span> ;
screenY=<span   id="p8">   </span>;
<p>test</p>
    <p>test</p>
   <p>test</p>
     <p>test</p>
    <p>test</p>
      <p>test</p>
     <p>test</p>
       <p>test</p>
      <p>test</p>
    <p>test</p>
   <p>test</p>
     <p>test</p>
    <p>test</p>
      <p>test</p>
     <p>test</p>
       <p>test</p>
      <p>test</p>
     </div>
</body>

</HTML>

 

 

clientX与clientY、x与y：鼠标相对于浏览器内容窗口左上角的偏移量。

offsetX与offsetY：在蓝色框内，鼠标相对于蓝色框左上角的偏移量。若移出蓝色框，则是与上面的值接近的数据。（？为什么不是相等？少了2px)。

screenX与screenY：鼠标相对于显示器左上角的偏移量，也许屏幕上同时打开的有其它的应用程序。　

但是x与clientX有何区别？还不清楚。

scrollLeft：当网页宽度超出屏幕宽度，并向右滚动了部分网页时，该值表示网页左边被卷去的宽度。

scrollTop：同上，网页上部被卷去的高度。

所以，若网页有被滚动(有滚动条且进行了滚动)，则此时鼠标的坐标应为：

x=event.clientX+document.body.scrollLeft;

y=event.clientY+document.body.scrollTop;


 

clientX、offsetX、screenX、pageX、x的区别
我的blog屋
05-30 1077
QQ群招募中：646258285（招募中，没几个人说话）， 需要交流的朋友可以直接加我微信( DntBeliv )或QQ( 1121864253 ) 一、clientX、clientY 点击位置距离当前body可视区域的x，y坐标 二、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度 三、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标 四、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标 五、x、y 和screenX、screenY
图解Js event对象offsetX, clientX, pageX, screenX, layerX, x区别
热门推荐
lzding的博客
05-02 5万+
通过 2 张图和 1 张表格，轻松区别 Javascript Event 对象中的offsetX, clientX, pageX, screenX, layerX, x等属性。 不同浏览器对这些属性的支持：
event.X和event.clientX的区别分析
12-12
event.clientX返回事件发生时,mouse相对于客户窗口的X坐标 event.X也一样 但是如果设置事件对象的定位属性值为relative event.clientX不变 而event.X返回事件对象的相对于本体的坐标 event对象详解 ICOOE 2000.3.31 http://www.51js.com/ event代表事件的状态，例如事件发生的的元素、鼠标的位置等等，event对象只在事件过程中才有效。 event属性： altKey 检索ALT键的当前状态 可能的值 true为关闭 false为不关闭 button 检索按下的鼠标键 可能的值： 0 没按键 1 按左键 2
event.clientX和event.clientY
weixin_33935505的博客
05-05 2813
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 ...
说一下event.x,event.clientX,event.offsetX区别
小乐乐
02-09 690
x:设置或者是得到鼠标相对于目标事件的父元素的外边界在x坐标上的位置。clientX:相对于客户区域的x坐标位置，不包括滚动条，就是正文区域。offsetx：设置或者是得到鼠标相对于目标事件的父元素的内边界在x坐标上的位置。screenX:相对于用户屏幕。clientX,   clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0,   clientY=0；  offs...
深入理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY
juceli的博客
07-24 1281
event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性 event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。 ...
event对象中pageX/Y，clientX/Y，screenX/Y，offsetX/Y区别
SIMIN_1617的博客
06-20 616
由鼠标事件（MouseEvent）可以发现： 1、clientX、clientY 点击位置距离当前body可视区域的x，y坐标 2、pageX、pageY 对于整个页面来说，包括了被卷去的body部分的长度 3、screenX、screenY 点击位置距离当前电脑屏幕的x，y坐标 4、offsetX、offsetY 相对于带有定位的父盒子的x，y坐标 5、x、y 和screenX、sc...
[转]分析x,offsetX clientX screenX,pageX,y,offsetY clientY screenY,pageY之间的区别
03-17
在JavaScript中，处理鼠标事件时，经常会遇到一系列与鼠标位置相关的属性，如`x`, `offsetX`, `clientX`, `screenX`, `pageX`, `y`, `offsetY`, `clientY`, `screenY`, `pageY`等。这些属性在不同的上下文下提供了...
详解x,offsetX clientX screenX,pageX与y,offsetY clientY screenY,pageY的区别
为了准确获取鼠标相对于不同坐标系的位置，HTML提供了多种属性，如offsetX,clientX,screenX,pageX,y,offsetY,clientY,screenY,pageY等。本文将详细分析这些属性之间的区别及其在开发中的应用场景。 ### offsetX和...
clientX,clientY,x,y等的区别[转]
peswe的专栏
03-25 717
clientX, clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=0； offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0； screenX, screenY是相对于用户显示器的位置 x,y是鼠标相对于当前浏览器的位置 Measure...
event中的[clientX,offsetX,screenX,pageX]
weixin_30485799的博客
03-26 159
0.1. clientX clientY event.clientX event.clientY client直译就是客户端，客户端的窗口就是指游览器的显示页面内容的窗口大小（不包含工具栏、导航栏等等）。 event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。 client范围 兼容性：IE和主流游览器都支持。 0.1.1. offsetX...
请说说event.clientX、event.clientY、event.offsetX、event.offsetY之间的关系
最新发布
王铁柱666的博客
11-12 530
是与鼠标事件相关的属性，它们提供了关于鼠标指针在触发事件时的位置信息。
event事件坐标详解（clientx， offsetx， screenX等）
zlzbt
07-23 8977
鼠标事件（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..
event.clientX、clientY、x、y、offsetX、offsetY、screenX、screenY的区别
04-03 541
某次运行的结果如下图所示，鼠标的位置基本位于图中蓝色框的左上角：从图中可见：clientX与clientY、x与y：鼠标相对于浏览器内容窗口左上角的偏移量。offsetX与offsetY：在蓝色框内，鼠标相对于蓝色框左上角的偏移量。若移出蓝色框，则是与上面的值接近的数据。（？为什么不是相等？少了2px)。screenX与screenY：鼠标相对于显示器左上角的偏移量，也许屏
event.pageX 和 event.clientX 区别
weixin_63681863的博客
10-23 905
都是 JavaScript 中鼠标事件对象的属性，用于获取鼠标事件发生时的水平坐标值。在实际应用中，你可以根据具体的需求选择使用哪个属性来获取鼠标的水平坐标。希望这个解释对你有帮助！如果还有其他问题，请随时提问。需要注意的是，当页面发生滚动时，两者的值会有所不同。是相对于整个文档的坐标，而。是相对于浏览器视口的坐标。没有滚动轴时，就相同。
区分event对象中的[clientX,offsetX,screenX,pageX]
嘿嘿
07-06 1030
前言 在平时的开发中，非常讨厌的就是兼容性了，兼容性的问题总会让我们记忆混淆，所以这次来区分一下event对象中的常用获取鼠标位置。 clientX clientY event.clientX event.clientY client直译就是客户端，客户端的窗口就是指游览器的显示页面内容的窗口大小（不包含工具栏、导航栏等等）。 event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。 client范围 兼容性：IE和主流游览器都支持。 offse
event对象的clientX,clientY与offsetX,offsetY有何不同？还有x,y?
DavidMen的专栏
09-10 1350
event对象的clientX,clientY与offsetX,offsetY有何不同？还有x,y?2007-10-10 17:41clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offset
clientX、offsetX、screenX、pageX的区别
Serena_tz的博客
02-22 5699
一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值