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 })();

轉載于:https://www.cnblogs.com/chenluomenggongzi/p/6131561.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/270392.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/270392.shtml
英文地址，請注明出處：http://en.pswp.cn/news/270392.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！