3

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

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

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

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

显示在不同位置打印的点的屏幕截图

我在 Firefox 和 Chrome 中都试过了。

4

2 回答 2

1

您的代码工作正常，

缩放页面并检查，

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

你可以找到小提琴

于 2012-10-16T10:20:55.457 回答
0

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

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();
};

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

于 2015-01-27T08:35:38.563 回答