如何从主体上的onClick事件获得鼠标单击的绝对位置

How do I get the absolute position of a mouse click from an onClick event on the body?

本文关键字：鼠标 单击 位置 事件 主体 onClick      更新时间：2023-09-26

我试图获得鼠标点击相对于浏览器/正文的绝对位置(顶部和左侧)，而不是正文内的任何父元素。

我有一个绑定到body的侦听器，但是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);
    }
};

评论者是正确的。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.

根据这个(http://docs.jquery.com/Tutorials:Mouse_Position)，这些应该给你的绝对位置。offsetX/Y给出相对位置

编辑2013年11月:原来的"鼠标位置"链接似乎被打破了，但pageX的文档包含一个使用jQuery pageX/Y的例子。关于offset方法的页面也包含了相关的示例。

如果我没理解错你的问题，这就是解决办法

 $("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);
});

我猜你可以使用window.pageXOffset, window.pageYOffset属性

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

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

//binding the function
var methods = {
    init: function () {
        $(document).click(_handleClick);
    }
};
相关文章：