Get the exact coordinates of a particular element itself with JQuery

I am trying to get the coordinates of a div with JQuery. I am currently using this method:

     $("#draw_area").click(function (e) {
             var x = e.pageX - this.offsetLeft;
             var y = e.pageY - this.offsetTop;
         });

However, I realised that if I have html elements on top of the div "draw_area", it will give me different "y". I do not want that. What I want is to get the exact/relative coordinates of that particular div, and the coordinates are always the same regardless whether there are other elements EDIT: above the div or next to the div. Can someone please tell me how I could achieve this? Any help will be appreciated. Thanks!

Upvotes: 0

Views: 102

Answers (1)

Rik Lewis
Rik Lewis

Reputation: 749

I think you're looking for .offset(), which gives you the position relative to the document, as opposed to .position(), which gives you the position relative to the offset parent.

     $("#draw_area").click(function (e) {
         var o = $(this).offset();
         var x = o.left;
         var y = o.top;
     });

Upvotes: 1

Related Questions