获取鼠标指针相对于元素的 x 和 y 位置答案

【问题标题】：Getting x and y position of mouse pointer relative to an element获取鼠标指针相对于元素的 x 和 y 位置
【发布时间】：2011-04-18 20:11:51
【问题描述】：

您好，有人可以帮忙吗？
当我移动元素的鼠标指针时，我想检索相对于 <div> 的 x 和 y 位置

例如 - 当我将鼠标指针放在 div 的左上角时，我希望得到 X 为 1 和 Y 为 1。

这需要与 Internet Explorer 兼容

感谢大家的宝贵时间。

这行得通，问题是我从 onclick 事件中调用它，它没有给出 scrollLeft 和 scrollTop 值。通过使用 Divs 顶部和左侧值的计算，我应该能够从中获得位置。

function getMouseXY(ctrl)        
{
    var tempX = event.clientX + document.body.scrollLeft;
    var tempY = event.clientY + document.body.scrollTop;

    document.getElementById('<%=txtXPos.ClientID%>').value = tempX;
    document.getElementById('<%=txtXPos.ClientID%>').value = tempY;
}

感谢林肯以外的所有人！！哈哈

【问题讨论】：

是 jquery 适合你的选择，还是你需要一个不包含框架的纯 JS 解决方案？
感谢林肯的客气话。
我看到的例子倾向于使用以下来获取鼠标位置坐标 var tempX = event.clientX + document.body.scrollLeft; var tempY = event.clientY + document.body.scrollTop;
这可以用于获取鼠标坐标，但是当我滚动时，scrollTop 值和 scrollLeft 值始终为 0

标签： javascript html internet-explorer

【解决方案1】：

你可以试试这样的

function myOnMouseMove(element) {
  var e = window.event
  var relativeX = e.screenX - element.scrollLeft;
  var relativeY = e.screenY - element.scrollTop;
}

【讨论】：

【解决方案2】：

这对我有用：

function getOffset( el ) 
{
    var _x = 0;
    var _y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) 
    {
        _x += el.offsetLeft - el.scrollLeft;
        _y += el.offsetTop - el.scrollTop;
        el = el.offsetParent;
    }
    return { top: _y, left: _x };
}
var x = getOffset( document.getElementById('MY DIV ID') ).left;
var Y = getOffset( document.getElementById('MY DIV ID') ).top;

function myOnYourEvent()
{
    var relativeX = window.event.clientX;
    var relativeY = window.event.clientY;
    var my_div_x = relativeX - x;
    var my_div_y = relativeY - Y;
    alert(my_div_x  + " " + my_div_y);
}

【讨论】：