1

ある DIV に配置されたポイントを別の DIV のポイントに変換したいと考えています。

次のhtmlが配置されています

    <html>
        <head>
           <link href="default.css" rel="stylesheet" />
           <script src="default.js"></script>
        </head>
        <body>
             <div id="complete_canvas" >
                 <div id="myDIV"></div>
                 <div id="otherDIV"></div>
             </div>
        </body>
    </html>

default.css には次のものが含まれています

#complete_canvas 
{
    width:100%;
    height:100%;
    position:absolute;
}
#myDIv{
    position:absolute;
     left:100px;
     top:100px;
     width:760px;
     height:100px;
}

default.js で、イベントリスナーを追加しています

    var canvas = getElem("complete_canvas");

    canvas.addEventListener("mousedown", onTouchDownOnDOMCanvas, false);

今、onTouchDownOnDOMCanvas関数で得られるポイントは、complete_canvas DIVに関係しています。この点を myDIV div 要素に書き込みます。たとえば、 100px 、 100px (complete_canvas 内) をクリックすると、 myDiv に書き込み、 0 、 0 になります。

その変換を行う方法はありますか？

ありがとう、

4

1 に答える 1

0

jqueryの使用

$("#complete_canvas").click(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
    //Calculations here
});

Javascript の使用

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function getClickPosition(event){
    pos_x = event.pageX;
    pos_y = event.pageY;
    alert(pos_x + " " + pos_y);
}
</script>
</head>
<body onclick="getClickPosition(event)">
    <!-- Other HTML here -->
</body>
</html>
于 2012-10-11T16:50:19.417 に答える