Ошибка: this.attr не является функцией при попытке получить положение элемента с помощью Raphael - PullRequest
Новая
       3

Ошибка: this.attr не является функцией при попытке получить положение элемента с помощью Raphael

1 голос
/ 28 марта 2012

Я новичок в Rapahel, и я пытаюсь получить положение элемента при нажатии. Пожалуйста, найдите фрагмент кода ниже. Это дает мне ошибку, говорящую this.attr не является функцией . Я уверен Я делаю это неправильно, пожалуйста, сообщите. 

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

Ответы [ 2 ]

0 голосов
/ 29 марта 2012

Ваша проблема в том, что вы помещаете обработчик onClick непосредственно в объект DOM (узел), а не в сам объект Raphael. Таким образом, как объяснил Люк, вы получаете объект DOM в качестве указателя this в обработчике событий. Поместите ли вы обработчик щелчка на объект Raphael, который вы получили бы в своем обработчике объекта Raphael.

попробуйте это вместо этого, и вы получите объект Raphael в качестве указателя this, как и ожидалось: 

nodeHeader.click(function(event) {
    console.log("%o, %o", this, event);
    alert(this.attr('x'));
});
0 голосов
/ 28 марта 2012

Объект "this" в контексте события дает вам узел DOM, а не объект Element, который оборачивается вокруг него и содержит функциональные возможности Raphael.Вы можете либо повторно использовать предыдущую переменную Element, которую вы объявили при ее создании, либо динамически получить объект Element по идентификатору: 

nodeHeader.node.onclick = function(){

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

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