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

Question

I am trying to get the absolute position (top and left) of a mouse click relative to the browser/body, not any 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.

Note that I can leverage jQuery and YUI functions.

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);
    }
};

According to this (http://docs.jquery.com/Tutorials:Mouse_Position), those should give you absolute positions. `offsetX/Y` gives you the relative position. — Mrchief, Jul 08 '11 at 19:53
@Mrchief -- you are correct, using that example I realized I needed to bind the event to the document and not the body node. — Aaron Silverman, Jul 08 '11 at 20:38

Tyler Biscoe · Answer 1 · 2011-07-08T20:10:34.837

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.

Get the position of the parent div relative to the body, then add the two values.

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.

+1 for the fun diagram! You should submit this to jQuery Docs — Mrchief, Jul 15 '11 at 17:28

Mrchief · Accepted Answer · 2014-07-07T14:03:10.113

5

According to this (http://docs.jquery.com/Tutorials:Mouse_Position), those should give you absolute positions. offsetX/Y gives you the relative position.

Edit November 2013: the original "Mouse Position" link seems to be broken, but the documentation for pageX contains an example that utilizes jQuery pageX/Y. The page about the offset method also contains relevant examples.

edited Jul 07 '14 at 14:03

answered Jul 08 '11 at 20:39

Mrchief

75,126
20
142
189

1

@MiladNaseri: The original docs are gone (someone forgot to implement a `302` page) but look at the **November edit**. Those pages will give you the same info. – Mrchief Jul 07 '14 at 14:05
Thanks, did check it out. – Milad Naseri Jul 11 '14 at 18:07

Arash Abedin · Answer 3 · 2017-12-11T08:01:32.627

4

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);
});

edited Dec 11 '17 at 08:01

answered Dec 11 '17 at 07:53

Arash Abedin

66
5

This helped me, you don't add the offset you substract it, THANKS! – MadMax Jun 14 '18 at 19:01

score 3 · Answer 4 · answered Oct 23 '19 at 14:46

3

I guess you can use window.pageXOffset, window.pageYOffset property

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

answered Oct 23 '19 at 14:46

Ron Lavit

1,081
10
9

score 0 · Answer 5 · answered Jul 08 '11 at 20:39

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.

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

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

5 Answers5

Linked