获取鼠标指针相对于某个div的坐标

Question

我正试图在mousedown和mouseup事件中获取鼠标指针的位置。有一个名为test的

区域，我想在div区域内发生mousedown和mouseup时获取位置。由于我将

作为我的表面，因此mousedown和mouseup的位置应该与

相关联。我在

里面放了一份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;
});

- Dhwani

---

获取位置的代码？你使用过position还是offset？ - Sid

这个对你没有帮助吗？https://dev59.com/N2855IYBdhLWcg3wIAoa#4517215 - doniyor

你所说的相对于 div 是指如果你在 div 的左上角点击，你会得到 x = 0，y = 0，如果你在右下角点击，你会得到 x = div 宽度，y = div 高度。 - Patrick Evans

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演示

- Patrick Evans

---

我想要针对鼠标按下和松开事件编写代码。我已经将您的代码应用于两者，但在鼠标按下事件中，它返回未定义。 - Dhwani

@Dhwani，对于任何鼠标事件都是一样的。请查看我刚添加的演示。 - Patrick Evans

我想要起点和终点的X和Y。 - Dhwani

然后在mousedown和mouseup回调中保存它们。 - Patrick Evans

这个解决方案让我免于彻底疯掉。谢谢！ - Ivan