JS获取鼠标位置、当前元素所在位置

最新推荐文章于 2024-06-15 19:18:00 发布

原创最新推荐文章于 2024-06-15 19:18:00 发布 · 1w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #函数

Js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript获取鼠标位置及当前元素的绝对位置和大小的方法。通过两个实用函数，实现了跨浏览器兼容的坐标获取，并能准确得到元素的top、left、width和height属性。

JS获取鼠标位置，当前元素的top left width height

//获取元素的绝对位置，大小。 参数js对象
function getElAbsolute(elem) {
    var t = elem.offsetTop;
    var l = elem.offsetLeft;
    var w = elem.offsetWidth;
    var h = elem.offsetHeight;
    elem = elem.offsetParent;
    while (elem) {
        t += elem.offsetTop;
        l += elem.offsetLeft;
        elem = elem.offsetParent;
    };
    return {
        top: t,
        left: l,
        width: w,
        height: h
    };
}
//兼容各种浏览器的,获取鼠标真实位置
function mousePosition(ev) {
    if (!ev) ev = window.event;
    if (ev.pageX || ev.pageY) {
        return { x: ev.pageX, y: ev.pageY };
    }
    return {
        x: ev.clientX + document.documentElement.scrollLeft - document.body.clientLeft,
        y: ev.clientY + document.documentElement.scrollTop - document.body.clientTop
    };
}