Get mouse coordinates relative to some div

Question

I am trying to get the mouse position in mousedown and mouseup . There is a div called test , and I want to get the position when mousedown and mouseup happen in the div area. And I take the div as my surface, so the position of the mouse and thinking should be connected with the div. I have pdf inside a div, so the coordinates that I get will help me highlight pdf.

I tried this, but it is 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;
});

Answer 1

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

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

, div 100 50 div,

x = 50, y = 25

JSFiddle Demo