HTML+JavaScript获取鼠标位置

最新推荐文章于 2023-04-12 16:04:24 发布

小云　　　　

最新推荐文章于 2023-04-12 16:04:24 发布

阅读量729

点赞数

分类专栏： JavaScript html 文章标签： javascript html5

本文链接：https://blog.csdn.net/lq24244/article/details/115801809

版权

JavaScript 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

当鼠标移入框内,获取鼠标的坐标,并显示在下方

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

在这里插入图片描述

完整代码

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #areaDiv {
            width: 300px;
            height: 130px;
            border: 1px solid black;
            margin-bottom: 20px;
        }

        #showMsg {
            width: 300px;
            height: 50px;
            border: 1px solid black;
        }
    </style>
    <script>
        window.onload = function () {
            var areaDiv = document.getElementById("areaDiv");
            var showMsg = document.getElementById("showMsg");
            //onmousemove该事件会在鼠标移动时候会被触发
            //事件对象
            //当我们事件的相应函数被触发时,浏览器每次都会将事件对象作为实参传递进相应函数
            //在事件对象中,封装了当前事件相关的一切信息,比如:鼠标的坐标,键盘哪个按键被按下,鼠标滚轮滚动的方向
            areaDiv.onmousemove = function (event) {
                //在IE8中,相应函数被触发时,浏览器不会传递事件对象,
                //IE8已经以下的浏览器中,是将事件对象作为window对象的属性保存的
                //解决对象兼容性问题
                if (!event) {
                    event = window.event;
                }
                event = event || window.event;
                //clientX可以获取鼠标指针的水平坐标
                //clientY可以获取鼠标指针的垂直坐标
                //   showMsg.innerText="X=:"+window.event.clientX+"Y=:"+ window.event.clientY;
                showMsg.innerText = "X=:" + event.clientX + ", Y=:" + event.clientY;
            }
        }
    </script>
</head>
<body>

<div id="areaDiv">

</div>
<div id="showMsg">


</div>
</body>
</html>