如何獲得與點擊的div邊界相關的[x，y]位置？

如何獲得與點擊的div邊界相關的[x，y]位置？如何獲得與點擊的div邊界相關的[x，y]位置？

點擊框的這個位置是隨機的，下面的示例只是一種情況。我想獲得與點擊的div相關的點擊位置，如何在js中執行它？

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title>img click positon</title> 
</head> 
<body> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(function(){ 
      $('.clickbox').bind('click',function(e){ 
       // how to get [x,y] positon relatived to div.clickbox ? 
       // console.log(x,y); 
      }) 
     }); 
    </script> 
    <style type="text/css"> 
     *{margin:0;padding:0} 
     .page{margin:0 auto; width:940px} 
     .box{width:200px; margin:0 auto; margin-top:10%} 
     .clickbox{width:100%; height:230px;background-color:tan;} 
    </style> 
    <div class="page"> 
     <div class="box"> 
      <div class="clickbox"></div> 
     </div> 
    </div> 
</body> 
</html>

enter image description here

來源

2013-10-07 mingfish_004

$('div.clickbox').click(function(e) { 
    var offset = $(this).offset(); 
    console.log("X: "+e.clientX - offset.left); 
    console.log("Y: "+e.clientY - offset.top); 
});

來源

2013-10-07 07:41:18

你是第一個使用jQuery'：D'給出正確答案的人 – Stphane

<script type="text/javascript"> 
$(function(){ 
    $('.clickbox').bind('click',function(e){ 
     var offset = $(this).offset(); 
     alert(e.clientX - offset.left); 
     alert(e.clientY - offset.top); 
    }) 
}); 
</script>

來源

2013-10-07 07:37:23

e.pageX屏幕座標，e.pageY被relatived到窗口，我點擊了點擊div的邊框，它不會返回0，但會返回數百個。 –

現在檢查我的編輯，讓知道它是否工作:) –

e.pageX and e.pageY

您還可以找到經偏置並在event object

來源

2013-10-07 07:38:20 DrColossos

e.pageX，e.pageY是相對於窗口，我點擊了點擊的div的邊界，它不返回0，但返回數百。 –

沒有考慮到這一點，我認爲Norbert Pisz的答案符合你的期望。 – DrColossos

如何獲得與點擊的div邊界相關的[x，y]位置？

回答

相關問題