RaphaelJS скрывает фигуру при выводе мыши

Я создал 4 прямоугольника, используя цикл for. Если вы наведете курсор на любой из этих прямоугольников, рядом с ним будет отображаться прямоугольник. Но проблема в том, что вновь отображаемый прямоугольник не скрывается при наведении мыши. Что не так с моим кодом?

JS-скрипт

window.onload = function() {
var paper = Raphael(0, 0, 640, 540);    

function aa(h1,h2){
    var showbox = paper.rect(h1+300,h2,100,100);
}
function ab(){
    showbox.hide();
}

for (i = 0; i < 2; i++) {
    for (j = 0; j < 2; j++) {
        (function(i, j) {
            var boxes = paper.rect(0 + (j * 100), 0 + (i * 100), 100, 100).attr({
                fill: '#303030',
                stroke: 'white'
            });
            boxes.node.onmouseover = function() {
                var h1 = boxes.getBBox().x;
                var h2 = boxes.getBBox().y;
                aa(h1,h2);
            };

            boxes.node.onmouseout = function() {
                ab();
            };
        })(i, j);
    }
}

person rohan_vg    schedule 14.12.2012    source источник


Ответы (1)


У вас есть проблемы с областью видимости javascript (плюс две другие более мелкие проблемы, см. ниже).

Переменная showbox определена в функции aa. Так что ваша функция onmouseout не может этого видеть. Запустите Firebug или эквивалент вашего браузера, и вы увидите стопку showbox is not defined ошибок.

Совет. При работе с Raphael я обычно создаю объект или массив, который содержит все мои созданные объекты, ключи для легкого доступа и область действия выше всех моих функций, связанных с Raphael, чтобы все они могли получить к нему доступ (см. пример jsfiddle ниже).

Как получить доступ к вашим объектам Raphael — это часть дизайна приложения, которую вам нужно решить на раннем этапе, иначе вам придется выполнить много рефакторинга в дальнейшем (было там, это больно!).

Вот адаптированная версия вашего кода, которая работает:

jsfiddle

Изменить: я добавил комментарии, объясняющие каждое изменение.


Он также устраняет две другие проблемы:

  • (В коде jsfiddle) Нет такого attr, как display: none; в Рафаэле, попробуйте .attr({opacity:0}) или .hide()...
  • ...НО... не надо! Ваше событие mouseover создает прямоугольники, ваше событие mouseout... скрывает их...? У вас будет постоянно растущий стек невидимых прямоугольников, который может в конечном итоге привести к краху чьего-то браузера. Либо показать, либо скрыть, либо создать, затем удалить - не создавать, а затем скрыть!

Сами события mouseover/mouseout на самом деле в порядке! :-)

person user56reinstatemonica8    schedule 14.12.2012
comment
спасибо за объяснение так хорошо :) Я не буду делать эти ошибки снова. - person rohan_vg; 15.12.2012