计算鼠标偏移量

最新推荐文章于 2022-12-06 15:01:47 发布

爱笑的宝宝

最新推荐文章于 2022-12-06 15:01:47 发布

阅读量976

点赞数

分类专栏： JavaScript前端文章标签：鼠标

本文链接：https://blog.csdn.net/abc15156714976/article/details/78119672

版权

JavaScript前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这篇博客详细讲解了如何在JavaScript中计算鼠标点击时相对于特定DOM元素的偏移量，包括坐标计算方法和实际应用示例，对于前端开发者来说是理解用户交互和事件处理的重要知识。

摘要由CSDN通过智能技术生成

                                        鼠标案例事件

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
                padding: 0;
            }
            div{
                width: 300px;
                height: 300px;
                border: 1px solid #000000;
                margin-top: 20px;
                margin-left: 30px;
            }
        </style>
        <script>

            //判断鼠标是否按下
            var isDown = false;

            //实时监听鼠标位置
            var moveX = 0;
            var moveY = 0;

            //记录鼠标按下瞬间的位置
            var x = 0;
            var y = 0;

            //鼠标按下时移动的偏移量
            var mouseMoveX = 0;
            var mouseMoveY = 0;

            //div的位置
            var div_x = 0;
            var div_y = 0;

            function myWheel(){
                var cont = document.getElementById("cont"); 
                cont.style.fontSize = "40px";
            }


            //鼠标移动事件
            function myMove(event){
                moveX = event.clientX;
                moveY = event.clientY;
                var cont = document.getElementById("cont"); 
                var mess2 = document.getElementById("mess2");

                cont.innerHTML = "x="+moveX+",y="+moveY;

                //计算鼠标移动偏移量
                mouseMoveX = moveX - x;
                mouseMoveY = moveY - y;

                //当鼠标按下时才执行
                if(isDown){
                    var new_div_x = div_x + mouseMoveX;
                    var new_div_y = div_y + mouseMoveY;

                    //改变div的位置
                    cont.style.marginTop = new_div_y;
                    cont.style.marginLeft = new_div_x;

                    mess2.innerHTML = "鼠标移动的偏移量为：x="+mouseMoveX+",y="+mouseMoveY+"<br>"+
                                        "DIV新位置：x="+new_div_x+",y="+new_div_y;
                }


            }

            //鼠标按下事件
            function myDown(event){
                x = event.clientX;
                y = event.clientY;
                isDown = true;

                var mess = document.getElementById("mess");

                var cont = document.getElementById("cont");
                //获取DIV的位置
                div_x = cont.offsetLeft;
                div_y = cont.offsetTop;

                mess.innerHTML = "鼠标按下了，当前鼠标位置：x="+x+",y="+y+"<br>"+
                                "DIV的位置：x="+div_x+",y="+div_y;
            }

            //鼠标松开事件
            function myUp(){
                var mess = document.getElementById("mess");
                mess.innerHTML = "鼠标松开了";
                isDown = false;
                mouseMoveX = 0;
                mouseMoveY = 0;
            }

        </script>
    </head>
    <body>

        <div id="cont" onwheel="myWheel()" onmouseup="myUp()" onmousedown="myDown(event)"  onmousemove="myMove(event)">

        </div>
        <font id="mess"></font><br>
        <font id="mess2"></font>

    </body>
</html>