Javascript 如何从身体上的 onClick 事件获取鼠标单击的绝对位置？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6629688/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get the absolute position of a mouse click from an onClick event on the body?
提问by Zugwalt
I am trying to get the absolute position (top and left) of a mouse click relative to the browser/body, notany parent elements within the body.
我试图获得相对于浏览器/正文的鼠标单击的绝对位置（顶部和左侧），而不是正文中的任何父元素。
I have a listener bound to the body, but e.pageX and e.pageY are giving me the position relative to a div.
我有一个绑定到正文的侦听器，但是 e.pageX 和 e.pageY 给了我相对于 div 的位置。
Note that I can leverage jQuery and YUI functions.
请注意，我可以利用 jQuery 和 YUI 函数。
Code that currently does not work correctly:
当前无法正常工作的代码：
//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);
}
};
采纳答案by Mrchief
According to this (http://docs.jquery.com/Tutorials:Mouse_Position), those should give you absolute positions. offsetX/Ygives you the relative position.
根据这个（http://docs.jquery.com/Tutorials:Mouse_Position），那些应该给你绝对位置。offsetX/Y给你相对位置。
Edit November 2013: the original "Mouse Position" link seems to be broken, but the documentation for pageXcontains an example that utilizes jQuery pageX/Y. The page about the offsetmethodalso contains relevant examples.
2013 年 11 月编辑：原始的“鼠标位置”链接似乎已损坏，但文档中pageX包含一个使用 jQuery pageX/的示例Y。该方法的页面offset还包含相关示例。
回答by Tyler Biscoe
The commenter is correct. pageX and pageY give you the mouse position relative to the entire document not its parent div. But if you're interested you can get the position relative to the document from the position relative to a div.
评论者是正确的。pageX 和 pageY 为您提供相对于整个文档而不是其父 div 的鼠标位置。但是，如果您有兴趣，可以从相对于 div 的位置获取相对于文档的位置。
Get the position of the parent div relative to the body, then add the two values.
获取父 div 相对于主体的位置，然后将两个值相加。
x = parentdiv.style.left + e.pageX;
y = parentdiv.style.top + e.pageY;
(0,0)
_____________________
|
|
| __________
|----100----| |
| |---60---* |
| |__________|
|
|
* = Mouse Pointer
I made the diagram because it was fun. Not because I felt you needed one!!
我制作图表是因为它很有趣。不是因为我觉得你需要一个！！
Also, for the above to work you may need to parseInt.
此外，要使上述工作正常运行，您可能需要 parseInt。
回答by Arash Abedin
If I understood your question well this would be the solution
如果我很好地理解您的问题，这将是解决方案
$("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);
});
回答by Ron Lavit
I guess you can use window.pageXOffset, window.pageYOffsetproperty
我想你可以使用window.pageXOffset，window.pageYOffset财产
document.body.addEventListener('click',(e)=>{
console.log(e.clientX + window.pageXOffset, event.clientY + window.pageYOffset)
}
)
回答by Zugwalt
The solution, hinted at by @Mrchief's link of http://docs.jquery.com/Tutorials:Mouse_Position, was to bind to the document and not the body element.
@Mrchief 的http://docs.jquery.com/Tutorials:Mouse_Position链接暗示的解决方案是绑定到文档而不是 body 元素。
//binding the function
var methods = {
init: function () {
$(document).click(_handleClick);
}
};
