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>
獲取鼠標相對於瀏覽器，顯示器，控件區的相對位置
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。