page,client,offset区别

 

offset:相对于当前“盒子”的距离 ，与滚动条无关

client:相对于可视区域的距离，与滚动条无关

page:相对于整个页面的距离，与滚动条有关

 

示例代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         #div1 {
13             width: 400px;
14             height: 1400px;
15             background-color: red;
16         }
17 
18         #div2 {
19             width: 400px;
20             height: 1400px;
21             background-color: green;
22         }
23     </style>
24 </head>
25 <body>
26 <div id="div1"></div>
27 <div id="div2"></div>
28 <script src="main.js"></script>
29 </body>
30 </html>
 1 (function () {
 2 
 3     function objClick(targetId) {
 4         document.getElementById(targetId).onclick = function (e) {
 5             console.log("offsetX " + e.offsetX + " offsetY " + e.offsetY);
 6             console.log("clientX " + e.clientX + " clientY " + e.clientY);
 7             console.log("pageX " + e.pageX + " pageY " + e.pageY);
 8             console.log("");
 9         }
10     }
11 
12     objClick("div1");
13     objClick("div2");
14 
15 
16 })();

 

posted @ 2016-12-04 19:33  晨落梦公子  阅读(1613)  评论(0)  编辑  收藏  举报