onmousemove/onmouseout - 当把鼠标指针移入/移出 div 时

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script>
  5. function myFunction(e) {
  6.   x = e.clientX;
  7.   y = e.clientY;
  8.   coor = "Coordinates: (" + x + "," + y + ")";
  9.   document.getElementById("demo").innerHTML = coor
  10. }
  11.  
  12. function clearCoor() {
  13.   document.getElementById("demo").innerHTML = "";
  14. }
  15. </script>
  16. </head>
  17. <body style="margin:0px;">
  18.  
  19. <div id="coordiv" style="width:300px;height:200px;border:1px solid" onmousemove="myFunction(event)" onmouseout="clearCoor()"></div>
  20.  
  21. <p>将鼠标悬停在上方的矩形上，然后获取鼠标指针的坐标。</p>
  22.  
  23. <p id="demo"></p>
  24.  
  25. </body>
  26. </html>
  27.