javascript - 如何从主体上的 onClick 事件中获取鼠标单击的绝对位置？

Question

我正在尝试获取鼠标单击相对于浏览器/正文的绝对位置（顶部和左侧），而不是正文中的任何父元素。

我有一个绑定到主体的侦听器，但是 e.pageX 和 e.pageY 给了我相对于 div 的位置。

请注意，我可以利用 jQuery 和 YUI 函数。

当前无法正常工作的代码：

//getting the position
function _handleClick(e) {
    var data = { absX: e.pageX, absY: e.pageY};
    _logClickData(data);
}

//binding the function
var methods = {
    init: function () {
        $("body").click(_handleClick);
    }
};

Answer 1

评论者是正确的。pageX 和 pageY 为您提供相对于整个文档而不是其父 div 的鼠标位置。但是，如果您有兴趣，可以从相对于 div 的位置获取相对于文档的位置。

获取父 div 相对于 body 的位置，然后将两个值相加。

x = parentdiv.style.left + e.pageX;
y = parentdiv.style.top + e.pageY;



(0,0)
_____________________
|
|
|            __________
|----100----|          |
|           |---60---* |
|           |__________|
|
|
        * = Mouse Pointer

我制作图表是因为它很有趣。不是因为我觉得你需要一个！！

此外，要使上述工作正常，您可能需要 parseInt.

Answer 2

根据这个（http://docs.jquery.com/Tutorials:Mouse_Position），那些应该给你绝对位置。offsetX/Y给你相对位置。

2013 年 11 月编辑：原始的“鼠标位置”链接似乎已损坏，但文档pageX包含一个使用 jQuery pageX/的示例Y。有关该offset方法的页面还包含相关示例。

Answer 3

如果我很好地理解了您的问题，这将是解决方案

 $("body").click(function(e){
   var parentOffset = $(this).offset(); 
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;

   window.alert(relX);
   window.alert(relY);
});

Answer 4

我想你可以使用window.pageXOffset,window.pageYOffset财产

document.body.addEventListener('click',(e)=>{
  console.log(e.clientX + window.pageXOffset, event.clientY + window.pageYOffset)
  }
)

Answer 5

@Mrchief 的http://docs.jquery.com/Tutorials:Mouse_Position链接暗示的解决方案是绑定到文档而不是正文元素。

//binding the function
var methods = {
    init: function () {
        $(document).click(_handleClick);
    }
};