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 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>
