1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <script type="text/javascript"> 8 window.onload=function() 9 { 10 /* 11 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标 12 */ 13 //获取两个div 14 var areaDiv=document.getElementById("areaDiv"); 15 var showMsg=document.getElementById("showMsg"); 16 /* 17 onmousemove 18 该事件将会在鼠标在元素中移动时被触发 19 20 事件对象 21 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数 22 在事件对象中封装了当前事件相关的一切信息 比如：鼠标的坐标 键盘哪个键被按下 鼠标滚轮滚动的方向 23 */ 24 areaDiv.onmousemove=function(event){ 25 //在showMsg中显示鼠标的坐标 26 //alert(event); 27 /* 28 clientX可以获取鼠标指针的水平坐标 29 clientY可以获取鼠标指针的垂直坐标 30 */ 31 /* 32 在IE8中，响应函数被处罚时，浏览器不会传递事件对象 33 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的 34 而火狐不将事件对象对我window对象的属性保存 35 36 if(!event){ 37 event=window.event; 38 } 39 */ 40 //解决事件对象兼容性问题 41 event=event||window.event;//如果存在event对象就返回event对象 42 var x=event.clientX;//window.event火狐不支持 43 var y=event.clientY; 44 showMsg.innerHTML="x:"+x+" y:"+y; 45 }; 46 }; 47 </script> 48 <style type="text/css"> 49 #areaDiv{ 50 width:100px; 51 height:25px; 52 border:1px solid black;; 53 } 54 #showMsg{ 55 width:100px; 56 height:20px; 57 border:1px solid black; 58 } 59 </style> 60 <body> 61 <div id="areaDiv"></div> 62 <br><br> 63 <div id="showMsg"></div> 64 </body> 65 </html>