¿Cómo obtengo la posición absoluta de un clic de un evento onClick en el cuerpo?

Question

Estoy tratando de obtener la posición absoluta (arriba y a la izquierda) de un clic del mouse relativo al navegador/cuerpo, no cualquier elemento padre dentro del cuerpo.

Tengo un oyente vinculado al cuerpo, pero e.pageX y e.pageY me dan la posición relativa a un div.

Tenga en cuenta que puedo aprovechar las funciones de jQuery y YUI.

Código que actualmente no funciona correctamente:

//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

De acuerdo con esto (http://docs.jquery.com/Tutorials:Mouse_Position), los que deben darle posiciones absolutas. offsetX/Y le da la posición relativa.

edición de noviembre de 2013: el enlace original "Posición del Ratón" parece estar roto, pero the documentation for pageX contiene un ejemplo que utiliza jQuery pageX/Y. El page about the offset method también contiene ejemplos relevantes.

Answer 2

El comentarista es correcta. pageX y pageY le dan la posición del mouse relativa al documento completo, no a su div principal. Pero si está interesado, puede obtener el puesto relativo al documento desde la posición relativa a un div.

Obtenga la posición del div principal en relación con el cuerpo, luego agregue los dos valores.

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



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

Hice el diagrama porque era divertido. ¡No porque sintiera que necesitabas uno!

Además, para que lo anterior funcione, es posible que deba analizarlo.

Answer 3

La solución, insinuada por el enlace de @ Mrchief de http://docs.jquery.com/Tutorials:Mouse_Position, era unir al documento y no al elemento del cuerpo.

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

Answer 4

Si he entendido bien su pregunta esta sería la solución

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