2012-03-28 6 views
1

Rapahelに新規で、クリックしたときに要素の位置を取得しようとしています。下記のコードスニペットを見つけてください。私はエラーthis.attrが機能していないと言っています。私は間違っていることを確認してください、助言してください。エラー:this.attrは、Raphaelを使用して要素の位置を取得しようとしたときに関数ではありません

<html> 

<head> 
    <title>Raphael Test</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
      <script type="text/javascript" src="raphael.js"></script> 
    </head> 
    <body> 
    <script type="text/javascript"> 
    window.onload = function initPage() { 
     var paper = new Raphael(document.getElementById('holder'), 1200, 500); 
     var nodeHeader = paper.rect(100,100,150,50,10); 
     nodeHeader.attr({ 
         gradient: '90-#6BAA3A-#409400', 
         stroke: '#6BAA3A', 
         'stroke-width': 1, 
         cursor: "move" 
         }); 
     nodeHeader.node.id='nodeHeader'; 
     nodeHeader.node.onclick = function(){ 
      alert(this.attr('x')); 
     }; 
    }; 
    </script> 
     <div id="holder"></div> 
    </body> 
    </html> 

答えて

0

イベントコンテキスト内の「この」オブジェクトは、あなたのDOMノードではなく、それを包むとラファエルの機能が含まれているElementオブジェクトを提供します。あなたは、どちらかのIDによって動的Elementオブジェクトを、それを作成するときに宣言した前の要素変数を再使用するか、または取得することができます。

nodeHeader.node.onclick = function(){ 

    // Re-use previous variable 
    alert(nodeHeader.attr("x")); 

    // Retrieve dynamically via ID 
    alert(paper.getById("nodeHeader").attr("x")); 
}; 
0

あなたの問題は、あなたが(DOMオブジェクトに直接「のonClick」ハンドラを置くということですノード)は、ラファエルオブジェクト自体ではありません。したがって、Lukeが説明したように、イベントハンドラ内でthisポインタとしてDOMオブジェクトを受け取ります。 ClickハンドラにRaphaelオブジェクトを受け取ったRaphaelオブジェクトにクリックハンドラを配置しましたか?

代わりにこれを試してみて、期待どおりに、このポインタとしてあなたのラファエルオブジェクトを受け取ります:

nodeHeader.click(function(event) { 
    console.log("%o, %o", this, event); 
    alert(this.attr('x')); 
}); 
関連する問題