鼠标指针位置

最新推荐文章于 2022-03-07 14:52:53 发布

MrLc666

最新推荐文章于 2022-03-07 14:52:53 发布

阅读量10w+

点赞数 2

分类专栏： JavaScript 文章标签： JavaScript

本文章博主原创，希望对你有所帮助。

本文链接：https://blog.csdn.net/sakenc/article/details/93751242

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

鼠标指针位置有3个，一个是相对窗口来说的相对位置，一个是相对屏幕来说的绝对位置，还有个一个是相对窗口客户区来说的相对位置，所以单独说鼠标位置不明确的，需要具体说明相对那个来说的鼠标位置

思考下面相对窗口客户区来说的相对位置：

获取指定元素的样式属性值
参数：e表示具体的元素，n表示要获取元素的脚本样式的属性名，如"width"、"borderColor"
返回值：返回该元素e的样式属性n的值

function getStyle(e, n) {
            if (e.style[n]) {
                // 如果在Style对象中存在，说明已显式定义，则返回这个值
                return e.style[n];
            }
            else if (e.currentStyle) {
                // 否则，如果是IE浏览器，则利用它的私有方法读取当前值
                return e.currentStyle[n];
            }
                // 如果是支持DOM标准的浏览器，则利用DOM定义的方法读取样式属性值
            else if (document.defaultView && document.defaultView.getComputedStyle) {
                n = n.replace(/([A-Z])/g, "-$1");    // 转换参数的属性名
                n = n.toLowerCase();
                var s = document.defaultView.getComputedStyle(e, null);
                // 获取当前元素的样式属性对象
                if (s)                             // 如果当前元素的样式属性对象存在
                    return s.getPropertyValue(n);     // 则获取属性值
            }
            else                                    // 如果都不支持，则返回null
                return null;
        }

完善获取鼠标指针在元素内的位置
参数：e表示当前事件对象，o表示当前元素
返回值：返回鼠标相对元素的坐标对象，其中属性x表示x轴偏移距离，属性y表示y轴偏移距离

 function getME(e, o) {
            var e = e || window.event;
            // 获取元素左侧边框的宽度
            // 调用getStyle()扩展函数获取边框样式值，并尝试转换为数值，如果转换成功，则赋值。
            // 否则判断是否定义了边框样式，如果定义边框样式，且值不为none，则说明边框宽度为默认值，即为3像素。
            // 如果没有定义边框样式，且宽度值为auto，则说明边框宽度为0
            var bl = parseInt(getStyle(o, "borderLeftWidth")) || ((o.style.borderLeftStyle && o.style.borderLeftStyle != "none") ? 3 : 0);
            // 获取元素顶部边框的宽度，设计思路与获取左侧边框方法相同
            var bt = parseInt(getStyle(o, "borderTopWidth")) || ((o.style.borderTopStyle && o.style.borderTopStyle !=
        "none") ? 3 : 0);
            var x = e.offsetX ||                    // 一般浏览器下鼠标偏移值
                    (e.layerX - o.offsetLeft - bl);
            // 兼容Mozilla类型浏览器，减去边框宽度
            var y = e.offsetY ||                    // 一般浏览器下鼠标偏移值
                    (e.layerY - o.offsetTop - bt);
            // 兼容Mozilla类型浏览器，减去边框宽度
            var u = navigator.userAgent;             // 获取浏览器的用户数据
            if ((u.indexOf("KHTML") > -1) ||
                (u.indexOf("Konqueror") > -1) ||
                (u.indexOf("AppleWebKit") > -1)
            ) {         // 如果是Safari浏览器，则减去边框的影响
                x -= bl;
                y -= bt;
            }
            return {// 返回兼容不同浏览器的鼠标位置对象，以元素边框内壁左上角为定位原点
                x: x,
                y: y
            }
        }

<div id="box" style="width:200px;height:200px;border:solid 1px red;float:right;"></div>
    <textarea id="t" cols="15" rows="4"></textarea>

    <script type="text/javascript">

        var t = document.getElementById("t");
        var b = document.getElementById("box");

        b.onmousemove = function (e) {
            var m = getME(e, b);
            t.value = "mouseX = " + m.x + "\n" + "mouseY = " + m.y
        }
    </script>

运行效果如下所示：

此是相对屏幕来说的绝对位置：

获取鼠标指针的页面位置
参数：e表示当前事件对象，由系统自动捕获
返回值：返回鼠标相对页面的坐标对象，其中属性x表示x轴偏移距离，属性y表示y轴偏移距离

<head>
    <meta charset="utf-8">
    <script>

        function getMP(e) {
            var e = e || window.event; 	// 标准化事件对象
            return {
                x: e.pageX || e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft),
                y: e.pageY || e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)
            }
        }

    </script>
</head>
<body style="width:2000px;height:2000px;">
    <textarea id="t" cols="15" rows="4" style="position:fixed;left:50px;top:50px;"></textarea>
</body>
<script>
    var t = document.getElementById("t");
    document.onmousemove = function (e) {
        var m = getMP(e);
        t.value = "mouseX = " + m.x + "\n" + "mouseY = " + m.y
    }
</script>

效果如下：

这个需要看坐标系，通常说到窗口的位置，是相对整个屏幕来说的，所以这时候坐标原点(0,0)是屏幕的左上角。通常在绘制窗口的非客户区比如窗口标题栏，边框之类的东西时候采用这种坐标系。

MrLc666

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
鼠标指针位置

鼠标指针位置有3个，一个是相对窗口来说的相对位置，一个是相对屏幕来说的绝对位置，还有个一个是相对窗口客户区来说的相对位置，所以单独说鼠标位置不明确的，需要具体说明相对那个来说的鼠标位置思考下面相对窗口客户区来说的相对位置：获取指定元素的样式属性值参数：e表示具体的元素，n表示要获取元素的脚本样式的属性名，如"width"、"borderColor"返回值：返回该元素e的样式属性n的值...
复制链接

扫一扫