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

Get mouse position in scrollable div

提问by Adam Holmes

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.

最近几天一直在啄我的另一个问题。正如您从我的其他问题中看到的那样，我正在创建一些思维导图软件。所以（极其简化）我有两个 div。一个是页面上的一个正方形，另一个是该 div 内的一个正方形，其大小约为 10 倍且可拖动。这样可以将对象放置在屏幕上，然后在添加另一个对象等时稍微移动到一边。我通过创建可滚动的外部 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:

我遇到的问题与 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

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 jsfiddlein 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.

但即使这样也行不通。我几乎可以肯定这个错误是因为我的内部 div 是可拖动的。希望我在尝试解释时有一些道理，但如果我没有，这里有一个非常简单的 jsfiddle试图演示我的情况（尽管这里没有单击鼠标，纯粹是为了演示我的 div 结构）。在我制作的产品中，用户将双击画布并出现一个新对象，因此鼠标坐标需要正确。

I hope someone out there can help me.

我希望那里有人可以帮助我。

Thanks in advance.

提前致谢。

EDIT: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.

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

回答by Aleksi Yrttiaho

I hope I understood your problem correctly.

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

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.

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

You can use event.pageXand event.pageYto determine the current mouse position.

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

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

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

The mouse position relative to the inner div can then be obtained with

然后可以获得相对于内部 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>');
});

回答by Andre Van Zuydam

I know this is very late, but I ran into the same situation myself and this is how I tackled it.

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

I didn't want to use jQuery so I wrote this recursive offset function to handle a problem with scroll offsets and placement of a div for example in multiple scrollable divs.

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

Using it for real:

实际使用它：

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

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