Get Mouse Pointer coordinates relative to some div

Question

I am trying to get mouse pointer position on mousedown and mouseup event. There is a div named test and i want to get position when mousedown and mouseup happen within div area. And I am taking div as my surface so the mousedown and mouseup position should be related to div. I have a pdf inside that div so, the coordinates i get will help me to highlight the pdf.

I tried this, but its not working fine.

function getPosition(element) {
    var xPosition = 0;
    var yPosition = 0;
    while (element) {
        xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
        yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
        element = element.offsetParent;
    }
    return { x: xPosition, y: yPosition };
}
$("#test").mousedown(function(e){
  var parentPosition = getPosition(e.currentTarget);
  startX = e.clientX - parentPosition.x;
  startY = (e.clientY - parentPosition.y)*2.5;
});
 $("#test").mouseup(function(e){
  var parentPosition = getPosition(e.currentTarget);
  endX = e.clientX - parentPosition.x;
  endY=   (e.clientY - parentPosition.y)*2.5;
});

doesnot this help you? http://stackoverflow.com/a/4517215/903790 — doniyor, Jun 27 '14 at 06:08
by relative to div do you mean if you click in the top left corner of the div you would get x = 0,y = 0, and if you click in the bottom right corner you would get x = div width,y = div height — Patrick Evans, Jun 27 '14 at 06:19

Patrick Evans · Accepted Answer · 2014-06-27T06:47:09.930

2

The coordinates of the mouse relative to the div are stored in the offsetX, offsetY properties of the event object

$("#someDiv").click(function(e){
   var x = e.offsetX;
   var y = e.offsetY;
});

So if you have a div with a width of 100 and a height of 50, and click exactly in the center of the div then

x = 50, y = 25

JSFiddle Demo

edited Jun 27 '14 at 06:47

answered Jun 27 '14 at 06:20

Patrick Evans

41,991
6
74
87

I want for mouseup and mousedown. Applied ur code for both, but in mousedown, it is giving undefined. – Dhwani Jun 27 '14 at 06:37
@Dhwani,its the same for any of the mouse events. See the demo i just added – Patrick Evans Jun 27 '14 at 06:48
I want X & Y of both start and end. – Dhwani Jun 27 '14 at 08:45
Then save them in the mousedown and mouseup callbacks – Patrick Evans Jun 27 '14 at 11:52
This solution saved me from completely going crazy. THANK YOU! – Ivan Sep 28 '18 at 14:10

Get Mouse Pointer coordinates relative to some div

1 Answers1