如何从正文上的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方法的页面还包含相关示例.