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

【问题标题】：Get mouse position in scrollable div在可滚动的 div 中获取鼠标位置
【发布时间】：2011-06-25 03:57:09
【问题描述】：

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

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

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

我希望有人可以帮助我。

提前致谢。

编辑： 未能提及对于我的应用程序的一部分，我使用 JQuery，因此无论有无 JQuery 的解决方案都可以。再次感谢。

【问题讨论】：

我注意到您的 Fiddle 正在使用 jQuery。既然你在这里没有提到它，你会使用 jQuery 作为你的解决方案的一部分吗？您期望相对于画布或文档的鼠标坐标是多少？
好吧，如果它可以在 JQuery 中更轻松地完成，那没关系......任何一种解决方案都很好......不过我会更新帖子。我需要相对于内部 div 的位置，即 jsfiddle 中的#canvas。谢谢。

标签： javascript jquery mouse scrollable mouse-coordinates

【解决方案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>');
});

【讨论】：

很好的综合答案！谢谢！

【解决方案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;

【讨论】：