在可滚动的div中获取鼠标位置

在过去的几天里，另一个问题一直困扰着我。 正如您可能从我的其他问题中看到的，我正在创建一些思维导图软件。 所以（非常简化）我有两个div。 一个是页面上的正方形，另一个是div中的大约10倍大且可拖动的。 这样可以将对象放置在屏幕上，然后稍微移动到侧面，同时添加另一个对象等。我通过创建外部div可滚动来实现这一点。

我遇到的问题与java脚本中的鼠标位置有关。 如果我在div中的任何位置获得鼠标位置它将不正确，因为我将内部div的大小减半到顶部和左侧（因此用户有效地看着canvas的中间并且可以按照他们喜欢的方式） 。 我已经尝试了数十种不同的鼠标坐标function，但这些function似乎都不起作用。 我在网络上找到的应该是跨浏览器的示例是：

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可拖动。 希望我尝试解释有一些意义，但如果我没有这里是一个非常简单的jsfiddle ，试图certificate我的情况（虽然这里没有鼠标点击，纯粹是为了演示我的div结构）。 在我制作的产品中，用户将双击canvas并显示一个新对象，因此鼠标坐标需要正确。

我希望有人可以帮助我。

提前致谢。

编辑：未能提到我的部分应用程序，我使用JQuery所以无论有没有JQuery的解决方案都没问题。 再次感谢。

Answer 1

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

您可以使用.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('
x: ' + relativePosition.left + ' y: ' + relativePosition.top + ' 
'); }); 

Answer 2

我知道这已经很晚了，但我自己遇到了同样的情况，这就是我解决它的方法。

我不想使用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;