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

Answer 2

如果有一个滚动的页面，我发现的大多数例子都不起作用......我使用这个算法来获得这个位置：

var getOffsets = function($event){
    var p = {};
    var body = "search the document for the body element";
    p.x = body.offsetLeft;
    p.y = body.offsetTop;
    while (body.offsetParent) {
        p.x = p.x + body.offsetParent.offsetLeft;
        p.y = p.y + body.offsetParent.offsetTop;
        if (body == document.getElementsByTagName("body")[0]) {
            break;
        }
        else {
            body = body.offsetParent;
        }
    }
    return p;
}

然而，在此之后你还必须考虑其他因素，我的情况是：

var GetExactClickPosition = function($event){

    var tr = $($event.target);
    if ($event.target.localName != 'tr'){
        tr = $($event.target).closest('tr');
    }

    var listDiv = $($event.target).closest('div');
    var p = getOffsets($event);
    var container = $('#mailingListExcludeMenuContainer');

    container.css({
        top: p.y - listDiv.scrollTop() - tr.height() - container.height() + $event.offsetY + "px",
        left: p.x + $event.offsetX + "px"
    });
    container.show();
};

我在页面的主滚动条中有一个带滚动条的列表... 我用它来在鼠标点击位置显示一个小菜单。