javascript - 准确的 jQuery x y 鼠标点击图像

Question

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

我想用图像背景上 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

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

您的代码工作正常，因为一个 span 被放置在您的 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');