[JavaScript]获取鼠标点击区域的相对、绝对位置坐标

最新推荐文章于 2023-07-07 16:58:03 发布

Jia的博客

最新推荐文章于 2023-07-07 16:58:03 发布

阅读量1.8w

点赞数 2

分类专栏： jQuery JavaScript 文章标签： javascript jquery html5 java js

本文链接：https://blog.csdn.net/Konaji/article/details/51849152

版权

JavaScript 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

jQuery

7 篇文章 0 订阅

订阅专栏

注：需要引入jQuery

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-3.0.0.js"></script>
    <script type="text/javascript">

            function click1 (event){
                var data1 = mouseCoords(event);
                var x1 = data1.x;
                var y1 = data1.y;
                alert("绝对坐标："+x1+","+y1);
                var data2 = getXAndY(event);
                var x2 = data2.x;
                var y2 = data2.y;
                alert("相对坐标："+x2+","+y2);
            }

            //获取鼠标点击区域中的相对位置坐标
            function getXAndY(event){
                //鼠标点击的绝对位置
                Ev= event || window.event;
                var mousePos = mouseCoords(event);
                var x = mousePos.x;
                var y = mousePos.y;
                //alert("鼠标点击的绝对位置坐标："+x+","+y);

                //获取div在body中的绝对位置
                var x1 = $("#test").offset().left;
                var y1 = $("#test").offset().top;
                //alert("div在body中的绝对位置坐标："+x1+","+y1);

                //鼠标点击位置相对于div的坐标
                var x2 = x - x1;
                var y2 = y - y1;
                return {x:x2,y:y2};
            }

            //获取鼠标点击区域在Html绝对位置坐标
            function mouseCoords(event){
                if(event.pageX || event.pageY){
                    return {x:event.pageX, y:event.pageY};
                }
                return{
                    x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
                    y:event.clientY + document.body.scrollTop - document.body.clientTop
                };
            }   
    </script>
</head>
<body>
    <div id="test" style="width:200px; height:200px; border:1px solid #d3d3d3;" onclick="click1(event)"></div>
</body>
</html>