Question

我有一个带背景图像的div - div设置为图像的确切大小，我的指针设置为div上的crosshair。

我想用图像背景上div中的x和y位置标记每次点击。我可以这样做，但div上的标记总是低于实际光标的左边，为什么会这样？

function showClick(x,y)
{
    $('.clickable').append('<span id="'+x+y+'_span" style="position: absolute;top:'+y+'px;left:'+x+'px;" class="red">+</span>');
}

$('.clickable').bind('click', function (ev) {
    var $div = $(ev.target);
    var offset = $div.offset();
    var xMargin = ($div.outerWidth() - $div.width()) / 2;
    var yMargin = ($div.outerHeight() - $div.height()) / 2;
    var x = (ev.pageX + xMargin) - offset.left;
    var y = (ev.pageY + yMargin) - offset.top;

    showClick(x,y);

});

工作示例：https://jsfiddle.net/b94ypmae/3/

Answer 1

您没有考虑跨度的大小（以及其中的字符）。

您的代码工作正常，因为跨度位于光标位置的div中，但该位置基于左上角

如果你在你的跨度周围放置一个边框，你可以看到它是左上角的完美对齐方式：JSFiddle showing border

你可以通过考虑放置的跨度的大小来解决这个问题（如果你知道它总是相同的，你也可以硬编码）。这是一个获取放置跨度的大小并将其移动一半宽度和高度的示例：Fixed JSFiddle

var placedSpan = $("#" + x + y + "_span");
var width = placedSpan.width();
var height = placedSpan.height();
placedSpan.css('left', x - width / 2 + 'px');
placedSpan.css('top', y - height / 2 + 'px');

准确的jQuery x y鼠标点击图片

1 个答案: