事件对象获取鼠标坐标

最新推荐文章于 2022-05-19 19:46:51 发布

双辞w

最新推荐文章于 2022-05-19 19:46:51 发布

阅读量340

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Memorial_w/article/details/114434891

版权

这篇博客介绍了一个简单的HTML和JavaScript应用，通过监听`onmousemove`事件，实现在特定区域移动鼠标时，实时显示鼠标的坐标。代码示例在IE8以上浏览器中有效，演示了如何获取和展示鼠标客户端坐标，以及处理浏览器兼容性问题。

摘要由CSDN通过智能技术生成

事件对象

<style>
        #areaDiv{
            width: 300px;
            height: 100px;
            border: 1px black solid;
            margin: 20px;
        }
        #showMsg{
            width:300px;
            height: 50px;
            border: 1px black solid;
            margin: 20px;
        }
    </style>
    <script>
        /*
        在IE8中不可用，所以先用if语句判断一下
        当鼠标在areaDiv中移动时，在showMsg中显示鼠标的坐标
        */
        window.onload = function(){
            var areaDiv = document.getElementById("areaDiv");
            var showMsg = document.getElementById("showMsg");
            //onmousemove:该事件在鼠标移动时，会发生 
            //在showMsg中显示鼠标的坐标
                /*
                --事件对象
                  当事件的响应函数被触发时，游览器都会将一个事件对象作为实参传进响应函数
                  clientX:可以获取鼠标指针的水平坐标
                  clientY：可以获取鼠标指针的垂直坐标
                */
            areaDiv.onmousemove = function(event){
                if(!event){
                    event = window.event;
                };//用于IE8
                event = event || window.event//解决兼容性
                var x = event.clientX;
                var y = event.clientY
                //alert("我动了");

                showMsg.innerHTML = "x = "+x +",y = "+y;
            };
                
          
        };
    </script>
</head>
<body>
    <div id="areaDiv"></div>
    <div id="showMsg"></div>
</body>
</html>