event对象的clientX,clientY与offsetX,offsetY有何不同？还有x,y?

最新推荐文章于 2025-02-06 10:38:27 发布
转载 最新推荐文章于 2025-02-06 10:38:27 发布 · 1.3k 阅读 · 0
文章标签：

#input #文档 #javascript #html #border #table

本文详细解释了在网页交互中，鼠标事件中clientX/clientY、offsetX/offsetY等属性的作用及区别。这些属性用于获取鼠标指针在不同参照系下的坐标位置。

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

event对象的clientX,clientY与offsetX,offsetY有何不同？还有x,y?
2007-10-10 17:41

clientX 设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientY 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。
offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。
offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。
screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。
x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标。

============================================================================

code:

-------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY onclick='test()' style="margin:0 0 0 0">
clientX=<INPUT TYPE="text" NAME="x1">
clientY=<INPUT TYPE="text" NAME="x2"><br/>
设置或获取鼠标指针位置相对于窗口客户区域的 xy 坐标，其中客户区域不包括窗口自身的控件和滚动条。 <br/>
offsetX =<INPUT TYPE="text" NAME="x3">
offsetY =<INPUT TYPE="text" NAME="x4"><br/>
设置或获取鼠标指针位置相对于触发事件的对象的 xy 坐标。 <br/>
screenX =<INPUT TYPE="text" NAME="x5">
screenY =<INPUT TYPE="text" NAME="x6"><br/>设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标<br/>
x=<INPUT TYPE="text" NAME="x7">
y=<INPUT TYPE="text" NAME="x8">设置或获取鼠标指针位置相对于父文档的 x 像素坐标。
<TABLE width=400 height=500 border=1 style="border-style:none" CELLPADDING=0 CELLSPACING=0 onclick='test()'>
<TR>
<TD>a</TD>
<TD>b</TD>
</TR>
<TR>
<TD>c</TD>
<TD>d</TD>
</TR>
</TABLE>
</body>
</html>
<SCRIPT LANGUAGE="JavaScript">
<!--
function test(){
document.all.x1.value=event.clientX;
document.all.x2.value=event.clientY;
document.all.x3.value=event.offsetX;
document.all.x4.value=event.offsetY;
document.all.x5.value=event.screenX;
document.all.x6.value=event.screenY;
document.all.x7.value=event.x;
document.all.x8.value=event.y;
}
//-->
</SCRIPT>

clientX、offsetX、screenX、pageX、x的区别
我的blog屋
05-30 1074
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对象的5种坐标
12-07
理解并正确使用clientX/clientY、pageX/pageY、offsetX/offsetY、x/y和layerX/layerY，可以帮助我们在处理页面事件时更准确地获取鼠标位置，从而实现各种交互效果。在实际开发中，推荐使用像jQuery或其他库提供的...
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
09-05
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析，需要的朋友可以参考下。
event事件对象和clientX,clientY
memedadexixaofeifei的博客
12-09 438
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;event事件和clientX,clientY&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;script ty
offsetX，clientX，pageX
DongFuPanda的博客
02-10 349
鼠标的位置 offsetX offsetY 相当于事件源元素的位置坐标。IE 只支持 offsetX 和 offsetY。网上有文章说 IE 和 chrome 有区别，但是我给父元素加了 border、padding 后发现数值一致，并无区别，所以应该可以放心使用。 clientX clientY 相对于浏览器视口的坐标。 pageX pageY 相对于 document 左上角的坐标。 ...
clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
YY的博客
10-21 1559
clientX, clientY | offsetX, offsetY | pageX, pageY的区别：
JavaScript中event对象的clientX,offsetX,screenX,pageX的区别
粥要熬。
09-04 371
event.clientX、event.clientY鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性event.pageX、event.pageY类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。event.of
[转]分析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和...
event.X和event.clientX的区别分析
09-05
除了`clientX`和`event.X`，`event`对象还有很多其他有用的属性。例如： - `altKey`：表示ALT键是否被按下。 - `button`：表示哪个鼠标按钮被点击，如左键、右键、中键等。 - `ctrlKey`：检查CTRL键的状态。 - `...
js鼠标事件 clientX、clientY、offsetX、offsetY、layerX、layerY、pageX、 pageY、screenX、screenY
热门推荐
蒲公英芽的博客
01-06 3万+
MouseEvent的类别有以下： mousedown 鼠标按下 mouseup 鼠标释放 click 左键单击 dblclick 左键双击 mousemove 鼠标移动 mouseover 鼠标经过 mouseout 鼠标滑出 mouseenter 鼠标进入 mouseleave 鼠标离开 contextmenu 右键菜单 注意： 执行顺序：mousedown —&g...
JavaScript 中一些概念理解 ：clientX、clientY、offsetX、offsetY、screenX、screenY
甜心的专栏
11-11 7643
clientX：设置或获取鼠标指针位置相对于窗口客户区域的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY： 设置或获取鼠标指针位置相对于窗口客户区域的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX： 设置或获取鼠标指针位置相对于触发事件的（this）对象的 x 坐标。 offsetY ：设置或获取鼠标指针位置相对于触发事件的（this）对象的 y 坐标。 screenX： 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 screenY： 设.
浅谈clientX、offsetX、screenX、pageX
漫磋嗟
10-24 2878
clientX、offsetX相对于鼠标事件对象，需要触发鼠标事件才会有clientX、offsetX。 clientX：当事件被触发时鼠标指针相对于窗口左边界的水平坐标,参照点为浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。 offsetX：当事件被触发时鼠标指针相对于所触发的标签元素的左内边框的水平坐标。 screenX：鼠标位置相对于用户屏幕水平偏移量，此时的参照点也就是原点是屏幕的左上角。 pageX：参照点是页面本身的body原点，而不是浏览器内容区域左上角，它计算的值不会随着滚动条而
一文吃透offsetX、offsetY、scrollTop、scrollY、scrollHeight、clientX、clientY、pageX、pageY以及类似属性的异同点
weixin_63383437的博客
11-17 3207
offsetX
offsetX、clientX、pageX等位置的计算
风火一回，一生不毁
06-01 5123
1.常见的事件位置属性 e.pageX——相对整个页面的坐标 注意:IE6、IE7、IE8无该属性 e.layerX——相对当前坐标系的border左上角开始的坐标 注意：在opera、IE6、IE7、IE8中这个属性，而IE8以上表示相对当前坐标系的border左上角开始的坐标 + 滚动条滚过的距离 e.offsetX——相对当前坐标系的
JS中 PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
qq_43631129的博客
07-05 8381
PageX、clientX、offsetX、layerX、offsetTop、offsetWidth各位置属性详解
clientX、offsetX、screenX、pageX的区别
Serena_tz的博客
02-22 5682
一、概念总结 1、event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性.clientX指可视区域内离左侧的距离，以滚动条滚动到的位置为参考点。各个浏览器相同。即当有滚动条时clientX 小于 pageX。 2、event.pageX、event.pageY 类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到
彻底搞懂 offsetX、scrollX、clientX 的区别
lefex的博客
03-05 2万+
无论在 iOS 还是前端开发中，关于如何定位一个元素是必须要掌握的知识，而在前端中，元素定位比较难理解，我们今天一起学习下。在 DOM 设计中，主要通过这些 API 来确定某个元素的具体...
理解鼠标事件坐标：pageX、clientX 和 offsetX 的区别与应用
最新发布
掘铁
02-06 1067
使用pageX获取鼠标相对于整个页面的位置。使用clientX获取鼠标相对于当前视口的位置。使用offsetX获取鼠标相对于触发事件的元素的位置。根据具体需求选择合适的属性可以帮助你更准确地处理用户的交互行为。如果你需要跨浏览器兼容性，建议检查并处理不支持某些属性的情况。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值