jquery協調在一個絕對定位div的圖像上的問題

我有一個問題，記錄使用jQuery/javascript，在'position：absolute div'容器中的圖像的x和y座標。jquery協調在一個絕對定位div的圖像上的問題

基本上應該發生的是圖像中的某處被點擊，並且包含信息的div被放置在這些座標上。

但是，當圖像的div容器具有絕對位置時，x和y座標是關閉的，但是需要用div覆蓋圖像，除非有人能想到更好的方法？

下面

是我的代碼，任何幫助讚賞

<style> 
    #image_container {position: absolute} 
    #test_img {} 
    .image_dot { height: 5px; width: 5px; background-color: red; position: absolute; } 
</style> 

<div id="image_container"> 
    <img src="mrt.jpg" id="test_img" /> 
</div> 
<script type="text/javascript"> 
     $("#test_img").click(function(event) { 
     var x = event.pageX - this.offsetLeft; 
     var y = event.pageY - this.offsetTop; 
     $("#image_container").append('<div class="image_dot" id="uniqueid" style="display: none;">Some text</div>'); 
     $("#unqiueid").css("top",x+"px").css("left",y+"px").show(); 
    }); 
</script>

來源

2010-12-21 wiggles

您是否試圖將新元素放置在圖像的左上角？或者就在用戶點擊的地方？ – 2010-12-21 16:08:20

用戶點擊的地方 – wiggles 2010-12-21 16:08:47

我不知道這是否會工作，因爲我沒有時間來建立一個測試用例，但我想如果可能的話，你應該只需讓click（）事件起泡至body元素即可。例如：

$(body).click(function(e) { 
    var x = event.pageX; 
    var y = event.pageY; 
    $("body").append('<div class="image_dot" id="uniqueid" style="display: none;">Some text</div>'); 
    $("#unqiueid").css("top",x+"px").css("left",y+"px").show(); 
}

如果一切都只是被定位絕對反正（而不是相對），它不應該的問題，我相信你應該使用body（或者window得到更好的pageX屬性和pageY值？）元素。

正如我所說，雖然，我沒有機會真正地測試這個。讓我知道它是否有效！

來源

2010-12-21 16:14:49

jquery協調在一個絕對定位div的圖像上的問題

回答

相關問題