织梦网站模板安装教程,国外设计有名网站,企业邮箱服务,wordpress建站 防攻击offset:相对于当前“盒子”的距离 #xff0c;与滚动条无关 client:相对于可视区域的距离#xff0c;与滚动条无关 page:相对于整个页面的距离#xff0c;与滚动条有关 示例代码#xff1a; 1 !DOCTYPE html2 html langen3 head4 … offset:相对于当前“盒子”的距离 与滚动条无关 client:相对于可视区域的距离与滚动条无关 page:相对于整个页面的距离与滚动条有关 示例代码 1 !DOCTYPE html2 html langen3 head4 meta charsetUTF-85 titleTitle/title6 style7 * {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 iddiv1/div
27 div iddiv2/div
28 script srcmain.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
