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

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

我有一个绑定到身体的侦听器，但是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相对于主体的位置，然后将这两个值相加

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



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

我做这个图表是因为它很有趣。不是因为我觉得你需要一个

---

此外，要使上述内容起作用，您可能需要parseInt。

@Mrchief的链接暗示的解决方案是绑定到文档而不是body元素

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

根据这个（），这些应该给你绝对位置<代码>偏移量x/Y提供相对位置

---

编辑2013年11月：原始的“鼠标位置”链接似乎已断开，但包含一个使用jQuery

pageX

/

Y

的示例。还包含了相关的例子。

如果我能很好地理解你的问题，这就是解决方案

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

---

根据这个（），这些应该给你绝对位置

offsetX/Y

为您提供了相对位置。@Mrchief--您是正确的，使用该示例，我意识到我需要将事件绑定到文档，而不是body节点。+1用于有趣的图表！您应该将其提交给jQueryDocs@MiladNaseri：原始文档不见了（有人忘记实现

302

页面），但请查看11月份的编辑。这些页面会给你相同的信息。谢谢，你已经检查过了。这对我很有帮助，你不需要添加偏移量，而需要减去它，谢谢！