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

Question

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

但我遇到的问题与 JavaScript 中的鼠标位置有关。如果我在任何位置获取鼠标位置，它都不正确，因为我将内部 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 可拖动。 希望我尝试解释得有些道理，但如果没有，这里是一个非常简单的 jsfiddle，试图演示我所遇到的情况（虽然此处没有点击鼠标，纯粹是为了演示我的 div 结构）。 在我制作的产品中，用户将双击画布，然后会出现一个新对象，因此需要正确的鼠标坐标。

我希望有人能帮帮我。

提前致谢。

编辑：未提及我在应用程序的某个部分中使用了 JQuery，因此使用或不使用 JQuery 的解决方案都可以。 再次感谢。

- Adam Holmes

---

我注意到你的Fiddle正在使用jQuery。既然你在这里没有提到它，那么你是否会将jQuery作为解决方案的一部分使用呢？你期望相对于画布或文档的哪些鼠标坐标？ - Nimrod

如果使用JQuery可以更容易地完成，那就没问题了... 任何一种解决方案都可以... 我会更新帖子的。我需要相对于内部div（即jsfiddle中的#canvas）的位置。谢谢。 - Adam Holmes

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('<p>x: ' + relativePosition.left + ' y: ' + relativePosition.top + ' </p>');
});

- Aleksi Yrttiaho

---

非常全面的回答！谢谢！ - Pedro Ferreira

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;

- Andre Van Zuydam