在javascript中获取相对鼠标X/Y

Question

我在页面上的某处有一个div。然后我得到鼠标XY：

 var relativeMouseX = self.gCurrentMouseX - self.gContainerLeft; 
     var relativeMouseY = self.gCurrentMouseY - self.gContainerTop; 

凡通过获得的电流mousex/Y：

// Update mouse coords 
this.gUpdateMousePos = function(evt) { 
    if (evt === undefined) evt = window.event; 
    if (window.event) { 
     this.gCurrentMouseX = event.clientX; 
     this.gCurrentMouseY = event.clientY; 
    } 
    else { 
     this.gCurrentMouseX = evt.clientX; 
     this.gCurrentMouseY = evt.clientY; 
    } 
} 

此测试工作得很好，但是当DIV位于下一个页面，它搅乱了他们的X/Y，因为坐标似乎只在视图区而不是整个页面。

X协作工作正常，因为页面横向扩展不会比浏览器大，但垂直是一个问题！

任何想法如何让鼠标X/Y相对于元素？

Answer 1

event.clientX+document.body.scrollLeft和event.clientX+document.body.scrollTop 或 event.pageX和event.pageY

第一种是仅仅增加当前的滚动位置的值，第二个是相对于页面的鼠标位置，不客户端窗口。

Answer 2

您需要考虑父元素以在页面上查找子元素的真实位置。见http://www.quirksmode.org/js/findpos.html

/** 
* Locate the real position of an element, 
* relative to its parent's offsets 
*/ 
function findPos (obj) { 
    var curleft = 0, 
     curtop = 0; 

    if (obj.offsetParent) { 
     do { 
      curleft += obj.offsetLeft; 
      curtop += obj.offsetTop; 
     } while (obj = obj.offsetParent); 

     return { x: curleft, y: curtop }; 
    } 
}