RaphaelJS隐藏形状onmouseout

Question

我使用for循环创建了4个rect。如果将鼠标悬停在任何这些rect上，将在旁边显示rect。但是问题在于，新显示的矩形不会在鼠标移开时隐藏。我的代码有什么问题？

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);
    }
}

Answer 1

您遇到了javascript范围问题（以及另外两个较小的问题，请参见下文）。

变量showbox在function中定义aa。因此，您的onmouseout函数看不到它。启动Firebug或浏览器的等效版本，您会看到一堆showbox is not defined错误。

提示：使用Raphael时，我通常会创建一个包含所有已创建对象的对象或数组，这些对象或数组的键控易于访问，并且作用域位于与Raphael相关的所有功能之上，以便所有这些人都可以访问它（请参见下面的jsfiddle示例）。

如何访问Raphael对象是您需要尽早决定的一项应用程序设计，否则您将需要进行大量的重构（到那里，这样做很痛苦！）。

这是可以使用的代码的改编版本：

jsfiddle

编辑：我添加了解释每个更改的注释。

它还解决了另外两个问题：

• （在的jsfiddle代码）没有这样的attr作为display: none;在拉斐尔，尝试.attr({opacity:0})或.hide()...
• ...但是...不要！您的mouseover事件创建矩形，您的mouseout事件... 隐藏矩形...？您将拥有越来越多的不可见矩形堆栈，这些堆栈最终可能会使某人的浏览器崩溃。先显示然后隐藏，或者先创建再删除-不要先创建再隐藏！

mouseover / mouseout事件本身实际上还不错！:-)