clientX，offsetX，screenX意义

最新推荐文章于 2022-01-04 11:50:47 发布

东语~

最新推荐文章于 2022-01-04 11:50:47 发布

阅读量536

点赞数 2

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/psp0001060/article/details/52267669

版权

一、定义

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>
<header>
	<title>获取浏览器位置</title>
	<style type="text/css">
		body{
			margin:0 0 0 0;
			font:normal bolder 12pt Arial;
		}
		
		div{
			background-color: orange; width: 500px; height: 400px; position: relative;margin: 40 40; 
		}
		
		table{
			background-color: palegreen; width: 400px; height: 300px; position: absolute; margin: 40 40; border-collapse: collapse;
		}
		
		td{
			border: 1px groove black;
		}
	</style>
</header>
<BODY οnclick='showPosition()'>
	<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/>
	<div>
		<TABLE οnclick='showPosition()'>
			<TR>
				<TD>t1</TD>
				<TD>t2</TD>
			</TR>
			<TR>
				<TD>t3</TD>
				<TD>t4</TD>
			</TR>
		</TABLE>
	</div>
</body>

</html>
<SCRIPT LANGUAGE="JavaScript">
	function showPosition() {
		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>