如何獲取鼠標在盒子中的位置？

更新時間:2022-01-07 來源:黑馬程序員瀏覽量:

如何獲取鼠標在盒子中的位置？在解決這個問題之前，我們先來了解下offset系列屬性。

offset的含義是偏移量，使用offset的相關屬性可以動態(tài)地獲取該元素的位置、大小等。相關屬性如下表所示。

offset系列屬性

屬性	說明
offsetLeft	返回元素相對其帶有定位的父元素左邊框的偏移
offsetTop	返回元素相對其帶有定位的父元素上方的偏移
offsetWidth	返回自身的寬度(包括padding、邊框和內容區(qū)域的寬度)。注意返回數值不帶單位
offsetHeight	返回自身的高度(包括padding、邊框和內容區(qū)域的高度)。注意返回數值不帶單位
offsetParent	返回作為該元素帶有定位元素的父級元素(如果父級都沒有定位則返回body)

上表中給出了ofset系列的屬性及說明，在獲取元素的位置和大小時，返回的是數值，沒有單位，獲取到的元素高度和寬度包括padding、邊框和內容區(qū)域的寬度。

在offset中沒有提供offsetRight和offsetBottom屬性，只有offsetLeft和offsetTop兩個屬性來獲取位置。在使用時該元素的父元素定要設置定位position。如果沒有設置定位，則返回的是body。

下面我們通過案例演示如何利用offset系列相關屬性獲取鼠標指針在盒子內的坐標。

鼠標指針在盒子內的坐標是以盒子左上角位置為坐標原點，具體分析如下圖所示。

鼠標指針在盒子內部坐標示意圖
鼠標指針在盒子內的坐標示意圖

從上圖中可以看出，通過鼠標指針在body中橫縱坐標分別減去盒子距離左邊框的偏移量和盒子距離上邊的偏移量，可以得到鼠標指針在盒子內部的橫縱坐標。

下面我們通過代碼來獲取鼠標指針在盒子內部的橫縱坐標，示例代碼如下。

下而我們誦過代碼來獲取鼠標指針在盒子內部的橫縱坐標，示例代碼如下。

<!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>offset屬性代碼演示|web前端開發(fā)高班 http://web.itheima.com</title>
        <!-- 定義盒子的樣式 -->
        <style>
            #box {
                position: absolute;
                left: 600px;
                top: 80px;
                width: 200px;
                height: 200px;
                background-color: pink;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script>
        var box = document.getElementById("box");
        // 打印盒子的寬度和高度
        console.log(box.offsetWidth);
        console.log(box.offsetHeight);

        // 綁定鼠標指針移動事件
        box.onmousemove = function (e) {
            // 獲取盒子的偏移量
            var left = box.offsetLeft;
            var top = box.offsetTop;

            // 計算鼠標指針在盒子內部的偏移量
            var x = e.pageX - left;
            var y = e.pageY - top;
            console.log("X坐標" + x + "\n" + "Y坐標" + y);
        };
    </script>
</html>

上述代碼中，第10~16行代碼定義了盒子樣式，寬度和高度分別為200px，并且設置position屬性實現盒子的絕對定位，讓盒子距離父元素上邊的偏移為20px,距離左邊框的偏移為50px。第26、27行代碼打印了盒子的寬度和高度。第30行代碼通過鼠標指針移動事的對象獲取到鼠標指針在頁面中的坐標。第32、33行代碼通過offsetLeft和offsetTop分別獲取元素沿X軸方向的距離left值和沿Y軸方向的距離top值。第36~ 38行代碼根據計算公式計算出鼠標指針在盒子中的橫坐標和縱坐標，然后在控制臺查看輸出結果。

瀏覽器在盒子中的坐標