在可滚动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.

还有一个问题，在过去的几天里一直困扰着我。你可能已经从我的其他问题中看到，我正在创建一些思维导图软件。所以(极度简化)我有两个div。一个是页面上的一个正方形，另一个在这个div中，它的大小是它的10倍。这样，对象可以被放置在屏幕上，然后稍微移动到一边，而另一个对象被添加等等。我通过创建外部div scrollable来实现这一点。

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

但即使这样也不行。我几乎可以肯定的是，这个错误是由于我的内分区是可拖动的。希望我能解释一下，但是如果我没有在这里做一个简单的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或者没有JQuery是可以的。再次感谢。

2 个解决方案

#1

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.pageX and event.pageY to determine the current mouse position.

您可以使用事件。pageX和事件。确定当前鼠标位置的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>');
});

#2

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;

#1