事件对象 

 1 <script>
 2     var btn = document.getElementById('btn');
 3     btn.addEventListener('click', function (ev) { // 事件对象 event
 4          var e = ev || window.event;  // 兼容写法
 5          console.log(e);
 6          console.log(e.type);
 7     });
 8 
 9     btn.addEventListener('mouseover', function (ev) { // 事件对象 event
10         var e = ev || window.event;  // 兼容写法
11         // console.log(e.target);
12         console.log(e.type);
13     })
14 </script>

 

1 e.screenX + ',' + e.screenY  相对于屏幕的宽度和高度
2 
3 e.clientX + ',' + e.clientY  相对于浏览器的宽度和高度（无论滚动多少，只是相对与浏览器）
4 
5 e.pageX + ',' + e.pageY  在页面没有滚动的时候是和clientX、与clientY是一样的

在盒子内获取光标的位置

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         body{
 8             /*margin-top: 1000px;*/
 9         }
10         #box {
11             width: 500px;
12             height: 500px;
13             background-color: red;
14             margin: 100px;
15         }
16     </style>
17 </head>
18 <body>
19 <div id="box"></div>
20 <script>
21     var box = document.getElementById('box');
22     box.addEventListener('mousemove', function (ev) {
23         var e = ev || window.event;
24         var x = e.pageX - box.offsetLeft;
25         var y = e.pageY - box.offsetTop;
26         box.innerText = '(' + x + ',' + y + ')';
27     });
28 </script>
29 </body>
30 </html>

 

posted @ 2019-07-17 00:26  疏影横斜水清浅  阅读(128)  评论(0)  编辑  收藏  举报