如何获得与点击的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]位置？

回答

相关问题