1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=gbk">
4 <script type="text/javascript">
5 function show_coords() {
6 //clientX, clientY是鼠标当前相对于网页的位置
7 x = event.clientX;
8 y = event.clientY;
9 alert(x + "," + y);
10 }
11 function show_coords2() {
12 //screenX, screenY是相对于用户显示器的位置
13 x = event.screenX;
14 y = event.screenY;
15 alert(x + "," + y);
16 }
17 function show_coords3() {
18 //offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置
19 x = event.offsetX;
20 y = event.offsetX;
21 alert(x + "," + y);
22 }
23 </script>
24 </head>
25 <body>
26 <p>
27 单击此按钮，clientX, clientY是鼠标当前相对于网页的位置
28 <input type="button" onclick="show_coords()" value="click"></p>
29 <p>
30 单击此按钮，screenX, screenY是相对于用户显示器的位置
31 <input type="button" onclick="show_coords2()" value="click"></p>
32 <p>
33 单击此按钮，offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置（如像对于此按钮）
34 <input type="button" onclick="show_coords3()" value="click像对于此按钮"></p>
35 <table align="center" border="1" width="100%" bordercolor="red" onclick="show_coords3()">
36 <tr>
37 <td>
38 clientX, clientY，offsetX, offsetY,screenX, screenY, x, y 的区别是什么？<br>
39 clientX, clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=0；<br>
40 offsetX, offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0；<br>
41 screenX, screenY是相对于用户显示器的位置<br>
42 x,y是鼠标相对于当前浏览器的位置
43 </td>
44 </tr>
45 </table>
46 </body>
47 </html>
