2014-02-17 117 views
0

我想在html網頁中編寫一些代碼,這樣當用戶單擊我的ClickBox中的鼠標時,X和Y座標將被保存,然後發送到我的數據庫。以click.box的CENTER作爲原點保存鼠標點擊座標

但現在,單擊處理程序......這是我多遠了:

<body> 
    <div id = "ClickBox" style = "left:100px;"> </div> 
</body> 



<script> 
    $(document).ready(function(e) 
    { 
      $('#ClickBox').click(function(e) 
     { 
       alert(e.pageX + ' , ' + e.pageY); 
     }); 
    }); 
</script> 



<style type="text/css"> 
    #ClickBox { width:640px; height:480px; cursor:pointer; background:#2f2f2f; top:50px; color:#fff; font:bold 12px Arial; } 
</style> 

它的工作原理,但顯示點擊的方式,是顯而易見的座標原點是不是中心或我的ClickBox左上角。我如何修改這些片段,以便無論我的ClickBox在我的網頁上的位置如何,我總是可以獲得我的中心的精確座標ClickBox正在座標原點

由於提前,

+1

讓您clickbox的座標和措施,以及 - 在那之後,它是幾個簡單的數學運算。 – CBroe

回答

1

座標相對於頂部和左側。

coordX = e.pageX - $('#clickbox').offset().left; 
coordY = e.pageY - $('#clickbox').offset().top; 

要使用Clickbox的中心獲取的座標爲原點

coordX = e.pageX - $('#clickbox').offset().left - ($('#clickbox').width() * 0.5); 
coordY = e.pageY - $('#clickbox').offset().top - ($('#clickbox').height() * 0.5); 
1

e.pageX和a.pageY四個光標在頁面不是特定的div的位置。

但你可以在div鼠標位置的除去頂部和您的DIV從身體左側距離

1

您需要刪除div的偏移:

Demo

$('#ClickBox').click(function(e){ 
    var coordX = e.pageX - $(this).offset().left, 
     coordY = e.pageY - $(this).offset().top; 
    alert(coordX + ' , ' + coordY); 
}); 
+0

謝謝,但你知道爲什麼在演示中座標顯示爲整數,而在我的瀏覽器中作爲浮點數,有很多小數位?! – Joshua

+0

@enyce12你的代碼顯示x和y座標的警報,但我需要點擊文本區域,當我在文本區域保存一些東西,並提交它應該保存在分貝,並顯示在框中與一些指針,當懸停或點擊它可以節省價值。 –