如何獲取鼠標(biāo)在盒子中的位置？

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

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

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

offset系列屬性

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

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

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

下面我們通過案例演示如何利用offset系列相關(guān)屬性獲取鼠標(biāo)指針在盒子內(nèi)的坐標(biāo)。

鼠標(biāo)指針在盒子內(nèi)的坐標(biāo)是以盒子左上角位置為坐標(biāo)原點，具體分析如下圖所示。

鼠標(biāo)指針在盒子內(nèi)部坐標(biāo)示意圖
鼠標(biāo)指針在盒子內(nèi)的坐標(biāo)示意圖

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

下面我們通過代碼來獲取鼠標(biāo)指針在盒子內(nèi)部的橫縱坐標(biāo)，示例代碼如下。

下而我們誦過代碼來獲取鼠標(biāo)指針在盒子內(nèi)部的橫縱坐標(biāo)，示例代碼如下。

<!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);

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

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

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

瀏覽器在盒子中的坐標(biāo)