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

Question

我有一个背景图像div - 该div设置为图像的确切大小，我的指针设置为crosshair在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

你没有考虑到跨度大小（和它里面的人物）。

您的代码工作正常，在跨度被放置在你的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');