深刻认识clientX，offsetX，screenX

最新推荐文章于 2024-05-24 23:45:01 发布

iteye_12869

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量72

点赞数

文章标签： javascript ViewUI

概念（来源于网络）：

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

实验实例（来源于网络，修改过）：

view plaincopy to clipboardprint?

Code:

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<BODYonclick='test()'style="margin:0000"mce_style="margin:0000">
<fontcolor=green>设置或获取鼠标指针位置相对于窗口客户区域的x,y坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientX=<INPUTTYPE="text"NAME="x1">
clientY=<INPUTTYPE="text"NAME="x2">
<fontcolor=blue>设置或获取鼠标指针位置相对于触发事件的对象的x,y坐标。
offsetX=<INPUTTYPE="text"NAME="x3">
offsetY=<INPUTTYPE="text"NAME="x4">
<fontcolor=green>设置或获取获取鼠标指针位置相对于用户屏幕的x,y坐标
screenX=<INPUTTYPE="text"NAME="x5">
screenY=<INPUTTYPE="text"NAME="x6">
<fontcolor=blue>设置或获取鼠标指针位置相对于父文档的x,y像素坐标。
x=<INPUTTYPE="text"NAME="x7">
y=<INPUTTYPE="text"NAME="x8">
<TABLEalign="center"width=400height=500border=1style="border-style:none"mce_style="border-style:none"CELLPADDING=0CELLSPACING=0onclick='test()'>
<TR>
<TD>a</TD>
<TD>b</TD>
</TR>
<TR>
<TD>c</TD>
<TD>d</TD>
</TR>
</TABLE>
</body>
</html>
<SCRIPTLANGUAGE="JavaScript">
<!--
functiontest(){
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>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<HTML>
<BODYonclick='test()'style="margin:0000"mce_style="margin:0000">
<fontcolor=green>设置或获取鼠标指针位置相对于窗口客户区域的x,y坐标，其中客户区域不包括窗口自身的控件和滚动条。
clientX=<INPUTTYPE="text"NAME="x1">
clientY=<INPUTTYPE="text"NAME="x2">
<fontcolor=blue>设置或获取鼠标指针位置相对于触发事件的对象的x,y坐标。
offsetX=<INPUTTYPE="text"NAME="x3">
offsetY=<INPUTTYPE="text"NAME="x4">
<fontcolor=green>设置或获取获取鼠标指针位置相对于用户屏幕的x,y坐标
screenX=<INPUTTYPE="text"NAME="x5">
screenY=<INPUTTYPE="text"NAME="x6">
<fontcolor=blue>设置或获取鼠标指针位置相对于父文档的x,y像素坐标。
x=<INPUTTYPE="text"NAME="x7">
y=<INPUTTYPE="text"NAME="x8">
<TABLEalign="center"width=400height=500border=1style="border-style:none"mce_style="border-style:none"CELLPADDING=0CELLSPACING=0onclick='test()'>
<TR>
<TD>a</TD>
<TD>b</TD>
</TR>
<TR>
<TD>c</TD>
<TD>d</TD>
</TR>
</TABLE>
</body>
</html>
<SCRIPTLANGUAGE="JavaScript">
<!--
functiontest(){
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 和x值在实验过程中，没有发现值不一样的例子，所以我认为它们在效果上是一样的！
offsetX 是相对于当前窗口内，本触发事件对象（或者是某一区域）而言，如本例中你单击a区域，值是相对于a所在<td>区域而言，同理b，c，d都一样！
clientX ，x，offsetX共同点：它们是相对位置，相对于当前窗口，只是offsetX相对于当前窗口的某个触发对象的父容器而言！
screenX是相对与客户端显示器而言，是绝对位置！

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/weinideai/archive/2009/02/13/3885444.aspx

iteye_12869

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
深刻认识clientX，offsetX，screenX

概念（来源于网络）：clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标...
复制链接

扫一扫