首页 > 其他分享> 文章详细

js判断x，y的坐标

2022-01-21 23:31:45 阅读：135 来源： 互联网

标签：判断鼠标 showMsg areaDiv window 坐标 js event

把鼠标放入在盒子中，在下面盒子显示鼠标的坐标：

知识点：

事件对象：

当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数

在事件的对象中封装了当前事件相关的一切信息，比如，鼠标的坐标、键盘的那个按键按下、鼠标滚轮滚动的方向

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

clientY可以获取鼠标的垂直坐标

在ie8及以下浏览器中，响应函数在触发时，浏览器不会传递事件对象，而是将事件对象作为window对象的属性 window.event

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #areaDiv {
            border: 1px solid black;
            width: 300px;
            height: 50px;
            margin-bottom: 10px;
        }

        #showMsg {
            border: 1px solid black;
            width: 300px;
            height: 20px;
        }
    </style>
    <script>
        window.onload = function () {
            //当鼠标在areaDiv中移动时在showMsg中来显示鼠标坐标

            //首先获取两个div
            var areaDiv = document.getElementById("areaDiv");
            var showMsg = document.getElementById("showMsg");

            //为大的div绑定鼠标移动事件
            areaDiv.onmousemove = function (event) {
                /*
                在ie8及以下浏览器中，响应函数在触发时，浏览器不会传递事件对象，而是将事件对象作为window对象的属性 window.event
                */
                //先判断event是否存在
                if (!event) {
                    event = window.event;
                }
                //在showMsg中显示坐标
                var x = event.clientX;//可以获取鼠标指针的水平坐标
                var y = event.clientY;//可以获取鼠标的垂直坐标
                showMsg.innerHTML = "x= " + x + ",y= " + y;
            };
        };
    </script>
</head>

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

</html>

运行结果：

标签：判断,鼠标,showMsg,areaDiv,window,坐标,js,event
来源： https://blog.csdn.net/dengfengling999/article/details/122631292

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js判断x，y的坐标