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

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

1 个答案: