0

クリックされたdivボーダーに関連する[x、y]位置を取得する方法は?

クリックされたボックスのこの位置はランダムです。次の例は 1 つの状況にすぎません。クリックした 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 に答える