js 通过onmousemove,clientX/clientY读取鼠标坐标

本文链接：https://blog.csdn.net/weixin_43564529/article/details/121650861

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           #areaDiv{
               width: 400px;
               height: 100px;
               border: 1px solid;
           }

           #showMsg{
               width: 400px;
               height: 20px;
               border: 1px solid;
           }

       </style>
       <script type="text/javascript">

           window.onload = function(){
               /*
               *当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
               */
               //获取两个div
               var areaDiv = document.getElementById("areaDiv")
               var showMsg = document.getElementById("showMsg")
               /*
               * onmousemove
               * -该事件会在鼠标在元素中移动时被触发
               *
               * 事件对象
               *    -当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
               * 在事件对象中封装了当前时间相关的一切信息，比如，鼠标的坐标，键盘那个按键被按下，鼠标滚轮滚动的方向
               */
               areaDiv.onmousemove = function(event){

                   /*
                   *在IE8中，响应函数被处罚时，浏览器不会传递事件对象
                   * 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存
                   */

               //解决时间的兼容性问题
                   if(!event){
                       event =window.event
                   }


                   /*
                   * clientX可以获取鼠标指针的水平坐标
                   * clientY可以获取鼠标指针的垂直坐标
                   */

               var x = event.clientX;
               var y = event.clientY;

                   //在showMsg中要显示鼠标的坐标

                   showMsg.innerHTML = " x = "+x +" , y = "+y;
               };

           };

       </script>
   </head>
   <body>
       <div id="areaDiv"></div>
       <br />
       <div id="showMsg"></div>
   </body>
</html>