在滚动div中获取鼠标位置

最近几天一直在嘲笑我的另一个问题。正如你可能从我的其他问题中看到的，我正在创建一些思维导图软件。所以（非常简化）我有两个div。一个是页面上的正方形，另一个是div的内容，大约是可拖动的10倍。这样，对象可以放在屏幕上，然后稍微移动到另一个对象被添加等。我通过创建外部div滚动来做到这一点。在滚动div中获取鼠标位置

我遇到的问题是在java脚本中的鼠标位置。如果我在div中的任何位置获得鼠标位置，它将不会是正确的，因为我将内部div的一半大小偏移到顶部和左侧（因此用户正在查看画布的中间并可以以任何他们喜欢的方式）。我已经尝试了几十种不同的鼠标坐标功能，但这些功能似乎都不起作用。这应该是我的地方在网上找到了跨浏览器的一个例子是：

function getMouse(e) { 
    var posx; 
    var posy; 
    if (!e) var e = window.event; 
    if (e.pageX || e.pageY) { 
    posx = e.pageX; 
    posy = e.pageY; 
    } 
    else if (e.clientX || e.clientY) { 
    posx = e.clientX + document.body.scrollLeft + document.getElementById("canvas").scrollLeft; 
    posy = e.clientY + document.body.scrollTop + document.getElementById("canvas").scrollTop; 
    } 
} //getMouse

但是，即使这是行不通的。我几乎可以肯定，这个错误是因为我的内部div是可拖动的。希望我已经做出了一些解释，但如果我没有试图证明我有这种情况（尽管这里没有完成鼠标点击，纯粹是为了展示我的div结构）。在产品中，我让用户双击画布并出现一个新的对象，因此鼠标坐标为什么需要正确。

我希望有人能帮助我。

在此先感谢。

编辑：无法提及，对于我的应用程序的一部分，我使用JQuery，所以无论有没有JQuery的解决方案都可以。再次感谢。

来源

2011-02-10 Adam Holmes

我注意到，你的小提琴是使用jQuery。既然你没有在这里提到它，你会使用jQuery作为你的解决方案的一部分吗？相对于画布或文档，您期望的鼠标坐标是什么？ – Nimrod 2011-02-11 00:10:24

那么，如果它可以在jQuery中更容易完成，那就可以了......两种解决方案都很好......我会尽快更新帖子。我需要相对于内部div的位置，即jsfiddle中的#canvas。谢谢。 – 2011-02-11 00:16:41

我希望我能正确理解你的问题。

您可以使用.offset()来确定任何元素相对于根文档的当前偏移量。然后可以将该偏移量与鼠标位置进行比较。

您可以使用event.pageX和event.pageY来确定当前的鼠标位置。

您可以使用$ {document} .scrollLeft()和$ {document}。 scrollTop()来确定当前滚动位置。

相对于内DIV鼠标位置然后可以用

$("#outer_canvas").mousemove(function(e) { 
    var relativePosition = { 
     left: e.pageX - $(document).scrollLeft() - $('#canvas').offset().left, 
     top : e.pageY - $(document).scrollTop() - $('#canvas').offset().top 
    }; 
    $('#mousepos').html('<p>x: ' + relativePosition.left + ' y: ' + relativePosition.top + ' </p>'); 
});

来源

2011-02-11 02:02:32

获得我知道这是非常晚了，但我遇到了同样的情况我自己，这是我如何解决它。

我不想使用jQuery，所以我编写了这个递归偏移函数来处理滚动偏移和div放置在多个可滚动div中的问题。

function recursive_offset (aobj) { 
var currOffset = { 
    x: 0, 
    y: 0 
} 
var newOffset = { 
    x: 0, 
    y: 0 
}  

if (aobj !== null) { 

    if (aobj.scrollLeft) { 
    currOffset.x = aobj.scrollLeft; 
    } 

    if (aobj.scrollTop) { 
    currOffset.y = aobj.scrollTop; 
    } 

    if (aobj.offsetLeft) { 
    currOffset.x -= aobj.offsetLeft; 
    } 

    if (aobj.offsetTop) { 
    currOffset.y -= aobj.offsetTop; 
    } 

    if (aobj.parentNode !== undefined) { 
     newOffset = recursive_offset(aobj.parentNode); 
    } 

    currOffset.x = currOffset.x + newOffset.x; 
    currOffset.y = currOffset.y + newOffset.y; 
    console.log (aobj.id+' x'+currOffset.x+' y'+currOffset.y); 
} 
return currOffset; 
}

将其用于实际：

var offsetpos = recursive_offset (this); //or some other element 

    posX = event.clientX+offsetpos.x; 
    posY = event.clientY+offsetpos.y;

来源

2013-06-12 09:42:56

在滚动div中获取鼠标位置

回答

相关问题