zoukankan html css js c++ java

获取鼠标相对于浏览器，显示器，控件区的相对位置

 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>

查看全文

相关阅读:
Apache中Cookie长度的设置 414 request-uri too large apache
URL中文参数，JSON转换，PHP赋值JS
PHP通过JSON给JS赋值;JS通过JSON给PHP传值
 PHP限制上传文件大小
 PHP 类中使用全局变量和全局常量
 利用span设置文字固定宽度
 Linux用户管理
 DropZone（文件上传插件）
rest_framework基础
 RESTful规范

原文地址：https://www.cnblogs.com/Relict/p/2314972.html