<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script type="text/javascript">
function show_coords() {
//clientX, clientY是鼠标当前相对于网页的位置
x = event.clientX;
y = event.clientY;
alert(x + "," + y);
}
function show_coords2() {
//screenX, screenY是相对于用户显示器的位置
x = event.screenX;
y = event.screenY;
alert(x + "," + y);
}
function show_coords3() {
//offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置
x = event.offsetX;
y = event.offsetX;
alert(x + "," + y);
}
</script>
</head>
<body>
<p>
单击此按钮，clientX, clientY是鼠标当前相对于网页的位置
<input type="button" onclick="show_coords()" value="click"></p>
<p>
单击此按钮，screenX, screenY是相对于用户显示器的位置
<input type="button" onclick="show_coords2()" value="click"></p>
<p>
单击此按钮，offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置（如像对于此按钮）
<input type="button" onclick="show_coords3()" value="click像对于此按钮"></p>
<table align="center" border="1" width="100%" bordercolor="red" onclick="show_coords3()">
<tr>
<td>
clientX, clientY，offsetX, offsetY,screenX, screenY, x, y 的区别是什么？<br>
clientX, clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=0；<br>
offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0；<br>
screenX, screenY是相对于用户显示器的位置<br>
x,y是鼠标相对于当前浏览器的位置
</td>
</tr>
</table>
</body>
</html>
Posted in前端仕锦
获取鼠标相对于浏览器，显示器，控件区的相对位置
