js判断x，y的坐标

2023-10-04 11:58:04

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

知识点：

事件对象：

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

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

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>

运行结果：

码农公寓

相关文章