javascript - 如何在居中的 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();
});

drawbox div 包裹在具有以下样式的居中 div 中

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

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

这是演示用的 fiddle

https://jsfiddle.net/ok0ohbxj/

Answer 1

引用您在问题评论中发布的 fiddle ，问题是您对 offsetTop 的使用:

The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.

在您的情况下，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();
    }
});

还有一个 fiddle 供您试用:https://jsfiddle.net/6gwnexjL/