javascript - clientX 和 clientY 没有给出正确的鼠标指针位置

Question

我写了这个简单的代码来在我用鼠标指针点击的位置打印一个小点:-

$(document).ready(function(){
    $('#pane').click(function(e){
        var pixel = $('<div />')
                  .addClass('pixel')
                  .css({
                      top: e.clientY,
                      left: e.clientX
                  });

        $('#pane').append(pixel)
    });
});

查看此 fiddle我创建。当我单击矩形内的任意位置时，该位置会打印一个小点。但问题是点没有打印在鼠标指针的 tip 所在的位置。请参阅下图了解我的意思:-

我在 Firefox 和 Chrome 中都试过了。

Answer 1

您的代码工作正常，

缩放页面并检查，

为了更好地理解，我已经将像素高度和宽度从 2px 更改为 3px。并从 e.clientX -1 和 e.clientY -1 位置绘制，因此它看起来正好在中心。

你可以找到Fiddle