clientX offsetX screenX scroolTop的一点认识

最新推荐文章于 2023-03-30 23:35:36 发布

懒得搭理你

最新推荐文章于 2023-03-30 23:35:36 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javaScript 文章标签： input iframe standards function html

本文链接：https://blog.youkuaiyun.com/chengqun520/article/details/7843610

javaScript 专栏收录该内容

10 篇文章

订阅专栏

概念：

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

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<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>	
<BODY οnclick='test()' style="margin:0 0 0 0" mce_style="margin:0 0 0 0"> 
<font color=green>设置或获取鼠标指针位置相对于窗口客户区域的 x,y 坐标，其中客户区域不包括窗口自身的控件和滚动条。</font> 
<br/> 
clientX=<INPUT TYPE="text" NAME="x1"> 
clientY=<INPUT TYPE="text" NAME="x2"> 
<br/> 
<br/> 
 
<font color=blue>设置或获取鼠标指针位置相对于触发事件的对象的 x,y 坐标。 </font> 
<br/> 
offsetX =<INPUT TYPE="text" NAME="x3"> 
offsetY =<INPUT TYPE="text" NAME="x4"> 
<br/> 
<br/> 
<font color=green>设置或获取获取鼠标指针位置相对于用户屏幕的 x,y 坐标 </font> 
<br/> 
screenX =<INPUT TYPE="text" NAME="x5"> 
screenY =<INPUT TYPE="text" NAME="x6"> 
<br/> 
<br/> 
<font color=blue>设置或获取鼠标指针位置相对于父文档的 x,y 像素坐标。</font> 
<br/> 
x=<INPUT TYPE="text" NAME="x7"> 
y=<INPUT TYPE="text" NAME="x8">  
<br/> 
<br/> 

	<TABLE  align="left" width=200 height=300 border=1 style="border-style:none" mce_style="border-style:none" CELLPADDING=0 CELLSPACING=0 οnclick='test()'> 
		<TR> 
			<TD>a</TD> 
			<TD>b</TD> 
		</TR> 
		<TR> 
			<TD>c</TD> 
			<TD>d</TD> 
		</TR> 
	</TABLE> 
	<iframe id="test" src="testClient.html" width="400" height="400"></iframe>
</body> 
</html>

testClient.html代码:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"> 
function show_coords(event)
{
var x=event.clientX;
var y=event.clientY;
var x2 = event.offsetX;
var y2 = event.offsetY;
alert("clientX: " + x + ", clientY: " + y+  "offsetX: " + x2 + ", offsetY: " + y2);
}
 var d, str;
    window.onload = window.onscroll = function () {
       d = document.getElementById("d");
       str = "<strong>" + ((document.compatMode.toLowerCase().indexOf("back") >= 0) ? "Quirks" : "Standards") + "</strong><br />"
           + "document.documentElement.scrollTop:" + document.documentElement.scrollTop + "<br />"
           + "document.body.scrollTop:" + document.body.scrollTop;
       d.innerHTML = str;
    }

</script>
</head>
 
<body style="font:12px Arial; _background-attachment:fixed; _background-image:url(about:blank);">
 
<p οnmοusedοwn="show_coords(event)">Click this paragraph, and an alert box will alert the x and y coordinates of the mouse pointer.</p>
 
<div style="height:10000px;"></div>
	<div id="d" style="position:fixed; top:50px; left:0; _position:absolute; _top:expression(offsetParent.scrollTop); _left:expression(offsetParent.scrollLeft); background:#ddd;"></div>

</body>
</html>

运行之后，可得出如下的结论：

1、clientX是指用户当前操作的窗口，比如说你点击页面上iframe加载的页面的区域的时候，clientX就以iframe里面的那个页面的左上角为原点。

2、offsetX 是相对于当前窗口内，本触发事件对象（或者是某一区域）而言，如本例中你单击a区域，值是相对于a所在<td>区域(100*150的大小)而言，同理b，c，d都一样！

所以外面的那个区域点击表格里面，最后offsetX offsetY的值永远在(0,0)-(100,150)这个范围内。

3、clientX ，x，offsetX共同点：它们是相对位置，相对于当前窗口，只是offsetX相对于当前窗口的某个触发对象的父容器而言！

4、screenX是相对与客户端显示器而言，是绝对位置。比如说，你可以调整屏幕分辨率来改变这个值。

5、scrollTop是指滚动条向下滚动了多少。

本文是在参考了网友的基础上修改的，原文地址：http://blog.youkuaiyun.com/weinideai/article/details/3885444

为了方便了解当前窗口这个概念，本文特意增加了iframe。

其他参考网址：

http://www.w3schools.com/js/tryit.asp?filename=try_dom_event_clientxy

http://topic.youkuaiyun.com/u/20100716/14/05d85e98-b79d-4b39-80cb-78946fdb0f0d.html?75955

http://wenku.baidu.com/view/ab06e029b4daa58da0114a2e.html

offsetLeft和offsetTop是指，某一html element离用户工作区的位置

2013-12-31号新加注释pageX、pageY：

In JavaScript:

pageX, pageY, screenX, screenY, clientX and clientY returns a number which indicates the number of physical pixels a point is from the reference point. The event point is where the user clicked, the reference point is a point in the upper left. These properties return the horizontal and vertical distance from that reference point.

pageX and pageY:
Relative the to the top left of the fully rendered content area in the browser. This reference point is below the url bar and back button in the upper left. This point could be anywhere in the browser window and can actually change location if there are embedded scrollable pages embedded within pages and the user moves a scrollbar.

screenX and screenY:
Relative to the top left of the physical screen/monitor, this reference point only moves if you increase or decrease the number of monitors or the monitor resolution.

clientX and clientY:
Relative to the upper left edge of the browser window. This point can move when the user moves/resizes the browser around the monitor. This point does not move if the user moves a scrollbar from within the browser.

pageX和pageY也是相对于浏览器用户内容区定位的（参考点是URL工具条上后退按钮的的下面）。如果有iframe页面嵌套和滚动条的话，这个参考点和最后的计算结果将会发生变化。