javascript - 获取相对于某些 div 的鼠标指针坐标

Question

我试图在 mousedown 和 mouseup 事件中获取鼠标指针位置。有一个名为 test 的 div，我想在 div 区域内发生 mousedown 和 mouseup 时获得位置。我将 div 作为我的表面，因此 mousedown 和 mouseup 位置应该与 div 相关。我在那个 div 中有一个 pdf，所以我得到的坐标将帮助我突出显示 pdf。

我试过了，但效果不佳。

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

鼠标相对于div的坐标保存在事件对象的offsetX、offsetY属性中

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

因此，如果您有一个宽度为 100 且高度为 50 的 div，然后恰好在 div 的中心单击

x = 50, y = 25

JSFiddle Demo