JavaScript 事件对象鼠标坐标鼠标移动

最新推荐文章于 2024-07-26 20:46:33 发布

禾子不枯萎

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量264

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/haojieji/article/details/126483703

版权

 <style>
        #areDiv{
            width: 400px;
            height: 100px;
            background-color: aquamarine;
        }
        #showMsg{
            width: 400px;
            height: 50px;
            background-color: antiquewhite;
        }
    </style>
    <script>
        window.onload=function(){
            var areDiv=document.getElementById("areDiv");
            var showMsg=document.getElementById("showMsg");
            //事件对象：当事件响应函数被触发，浏览器每次都会将一个事件对象作为实参传递
            //进响应函数；在事件对象中封装了当前事件的一切信息，比如鼠标坐标，键盘按键被按下
            areDiv.onmousemove=function(event){
                //在IE8中浏览器不会传递事件对象;IE8及以下，将事件作为window对象属性保存
                //兼容解决
                if(event){
                    event=window.event;
                }
                //event=event||widow.event;
                //clientX 返回当事件被触发时，鼠标指针的水平坐标;clientY 返回当事件被触发时，鼠标指针的垂直坐标。 
                var x=event.clientX;
                var y=event.clientY;
                showMsg.innerHTML="x="+x+","+"y="+y;

            }
        }
    </script>
</head>
<body>
    <div id="areDiv"></div>
    <div id="showMsg"></div>
</body>