如何获取光标在居中的div位置？

Question

我当时正在制作绘图应用程序，因此必须居中。

为了检测我使用的光标位置

$('#drawbox').mousedown(function(e){
    paint = true;

    var mouseX = e.pageX - this.offsetLeft;
    var mouseY = e.pageY - this.offsetTop;

    addClick(e.pageX-this.offsetLeft, e.pageY-this.offsetTop);
    redraw();
});

绘制框div被包装在具有以下样式的居中div中

position:relative;
margin:auto;
text=align:center;

这导致我的绘图超出范围，由于某些原因，在没有居中包装div的情况下它可以正常工作。 谢谢你的帮助

这是演示的小提琴

https://jsfiddle.net/ok0ohbxj/

Answer 1

参考您在问题评论中发布的小提琴，问题在于您使用offsetTop ：

HTMLElement.offsetTop只读属性返回当前元素相对于offsetParent节点顶部的距离。

在您的情况下，offsetParent节点是包装容器.centerHelper而不是您的文档。

由于您已经在使用jQuery，所以我建议$('drawbox').offset() ，它返回相对于文档的偏移量：

$('#drawbox').mousedown(function(e){
    paint = true;

    var mouseX = e.pageX - $('#drawbox').offset().left;
    var mouseY = e.pageY - $('#drawbox').offset().top;
    addClick(mouseX, mouseY);
    redraw();
});

$('#drawbox').mousemove(function(e){
    if (paint){
        var mouseX = e.pageX - $('#drawbox').offset().left;
        var mouseY = e.pageY - $('#drawbox').offset().top;
        addClick(mouseX,mouseY, true);
        redraw();
    }
});

还有一个小提琴供您试用： https : //jsfiddle.net/6gwnexjL/