元素定位与鼠标事件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45348207/article/details/126905200

(补充也在进行中...)

首先知道各个元素的位置关系,在浏览器中有一个div盒子,包裹着一个div球.

代码如下:

    <style>
        body{
            background-color: darkgrey;
        }
        .box{
            width: 400px;
            height: 500px;
            position:absolute;
            left: 200px;
            top: 100px;
            background-color:antiquewhite;
            padding: 20px;
            border: 5px solid black;
        }
        .ball{
            width: 80px;
            height: 90px;
            padding: 10px;
            border: 2px solid black;
            position:absolute;
            left:110px;
            top:60px;
            border-radius: 50%;
            background-color:aqua
        }
    </style>

ball的尺寸获取

ball球自身的宽高

offsetWidth:元素的完全宽度,width + 2padding + 2border

offsetHeight:元素的完全高度,height + 2padding + 2border

ball可视区宽高

clientWidth:width + 2padding

clientHeight:height + 2padding

        console.log(ball.offsetWidth);   //104  (80 + 2*10 + 2*2)
        console.log(ball.offsetHeight);  //114  (90 + 2*10 + 2*2)

        console.log(ball.clientWidth);   //100   (80 + 2*10)
        console.log(ball.clientHeight);  //110    (90 + 2*10)

ball相对于父级元素的定位

offsetLeft:ball距离父级元素box左边的距离

offsetTop:ball距离父级元素box上边的距离

在设置ball的样式的时候就已经设置ball相对于box的定位,现在时在假设不知道的情况下获取ball的定位.也就是ball在box的位置

        console.log(ball.offsetLeft); //110
        console.log(ball.offsetTop);  //60
        console.log(box.offsetLeft);  //200
        console.log(box.offsetTop);   //100

鼠标所在位置

(图源于网络)

首先为ball绑定点击事件,当鼠标进行点击时,我们就可以获取其所在位置

js动态绑定的事件中对于事件的获取可以通过window.event 也可以通过形参获取

clientX:鼠标距可视区左边的距离

clientY:鼠标距可视区上边的距离

pageX:鼠标相对于浏览器文档左边的位置

pageY:鼠标相对于浏览器文档上边的位置

当浏览器页面没有横向的滚动条时,clientX 等于pageX,但是当页面存在横向滚动条,且滚动条没有处于最左端,也就是页面卷进去一部分后,pageX大于clientX,对于竖向的滚动条也一样.

        ball.onclick = function(ele){
            console.log(ele.clientX);   //356
            console.log(ele.clientY);   //289
            console.log(ele.pageX);     //356
            console.log(ele.pageY);     //289
        }

offsetX:当鼠标事件发生时，鼠标相对于事件发生元素左边的位置

offsetY:当鼠标事件发生时，鼠标相对于事件发生元素上边的位置

        ball.onclick = function(ele){
            console.log(ele.offsetX);
            console.log(ele.offsetY);
        }

screenX:事件触发时鼠标距离屏幕左边的距离

screenY:事件触发时鼠标距离屏幕上边的距离

        ball.onclick = function(ele){
            console.log(ele.screenX);
            console.log(ele.screenY);
        }

完整代码

<!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>
        body{
            background-color: darkgrey;
        }
        .box{
            width: 400px;
            height: 500px;
            position:absolute;
            left: 200px;
            top: 100px;
            background-color:antiquewhite;
            padding: 20px;
            border: 5px solid black;
        }
        .ball{
            width: 80px;
            height: 90px;
            padding: 10px;
            border: 2px solid black;
            position:absolute;
            left:110px;
            top:60px;
            border-radius: 50%;
            background-color:aqua
        }
    </style>
</head>
<body>
    <div class="box"> 
        <div class="ball"></div>
    </div>
    <script>

        //先获取各个节点
        let ball = document.querySelector('.ball');
        let box = document.querySelector('.box');

        console.log(ball.offsetWidth);   //80
        console.log(ball.offsetHeight);  //100

        console.log(ball.clientWidth);
        console.log(ball.clientHeight);

        console.log(ball.offsetLeft); //110
        console.log(ball.offsetTop);  //60
        
        console.log(box.offsetLeft);  //200
        console.log(box.offsetTop);   //100


        // 为ball绑定点击事件
        ball.onclick = function(ele){
            console.log(ele.clientX);
            console.log(ele.clientY);
            console.log(ele.pageX);
            console.log(ele.pageY);
            console.log(ele.offsetX);
            console.log(ele.offsetY);
            console.log(ele.screenX);
            console.log(ele.screenY);
         }

    </script>
</body>
</html>

DOM中各种尺寸的获取

ball的尺寸获取

鼠标所在位置