0

如何获取与单击的 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>

在此处输入图像描述

4

3 回答 3

2 
<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-07T07:37:23.437 回答
2 
$('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-07T07:41:18.930 回答
1 
e.pageX and e.pageY

您还可以在事件对象中找到偏移坐标和屏幕坐标

于 2013-10-07T07:38:20.817 回答