Question

我是Rapahel的新手，我试图在点击时获取元素的位置。请在下面找到代码片段。它给我一个错误，说 this.attr不是函数 .Im我确实做错了，请指教。

    <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>

Answer 1

事件上下文中的“this”对象为您提供DOM节点，而不是包含它的Element对象并包含Raphael的功能。您可以重复使用在创建时声明的前一个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"));
};

Answer 2

您的问题是您将“onClick”处理程序直接放在DOM对象（节点）上而不是Raphael对象本身。因此，正如Luke所解释的那样，您将DOM对象作为事件处理程序中的this指针接收。您是否已将Click处理程序放在Raphael对象上，您将在单击处理程序中收到Raphael对象。

尝试这样做，你会收到你的Raphael对象作为预期的指针：

nodeHeader.click(function(event) {
    console.log("%o, %o", this, event);
    alert(this.attr('x'));
});

错误：当尝试使用Raphael获取元素的位置时，this.attr不是函数

2 个答案: