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

2023年5月9日 194次阅读

我试图在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;
});

最佳答案 鼠标相对于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

点赞