获取可滚动div中的鼠标位置 [英] Get mouse position in scrollable div

问题描述

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

Yet another question that has been pecking away at me the last few days. As you may have seen from my other questions I am creating some mind map software. So (extremely simplified) I have a two divs. One that is a square on the page, and another inside that div which is about 10 times as large and draggable. This is so that objects can be placed on the screen and then moved slightly to the side whilst another object is added etc. I do this by creating the outer div scrollable.

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

The problems that I am having though are to do with the mouse position in java script. If I get the mouse position anywhere in the div it wont be correct as I offset the inner div by half its size to the top and left (so effectively the user is looking at the middle of the canvas and can go any way they like). I have tried tens of different mouse coordinate functions but none of these seem to work. An example that is supposed to be cross browser that I found somewhere on the web is:

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 的尝试演示我的情况（尽管这里没有点击鼠标，纯粹是为了展示我的div结构）。在我制作的产品中，用户将双击画布并显示一个新对象，因此鼠标坐标需要正确的原因。

But even this doesn't work. I am almost certain that the error is because I have the inner div being draggable. Hopefully I have made some sense trying to explain, but if I have not here is a very simple jsfiddle in an attempt to demonstrate the situation that I have (although no mouse clicking is done here, purely to demonstrate my div structure). In the product I am making the user will double click on the canvas and a new object will appear, and hence why the mouse co-ordinates need to be correct.

I希望有人可以帮助我。

I hope someone out there can help me.

提前致谢。

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

Failed to mention that for part of my application I use JQuery so a solution either with or without JQuery would be fine. Thanks again.

推荐答案

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

I hope I understood your problem correctly.

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

You can use .offset() to determine the current offset of any element relative to the root document. This offset can be then compared with the mouse position.

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

You can use event.pageX and event.pageY to determine the current mouse position.

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

You can use ${document}.scrollLeft() and ${document}.scrollTop() to determine the current scroll position.

然后可以使用

$("#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>');
});

这篇关于获取可滚动div中的鼠标位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！