RaphaelJS 在鼠标移出时隐藏形状

Question

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

JS Fiddle

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 定义在函数aa 中。所以你的 onmouseout 函数看不到它。打开 Firebug 或浏览器的等效程序，您会看到一堆 showbox is not defined 错误。

提示:在使用 Raphael 时，我通常会创建一个对象或数组，其中包含我创建的所有对象，键控以便于访问，并且作用域在我所有与 Raphael 相关的函数之上，以便它们都可以访问它(参见下面的 jsfiddle 示例)。

如何访问 Raphael 对象是应用程序设计的一部分，您需要尽早决定，否则您将需要进一步进行大量重构(在那里，它很痛!)。

这是您的代码的改编版本:

jsfiddle

编辑:我添加了解释每项更改的注释。

---

它还修复了另外两个问题:

• (在 jsfiddle 代码中)没有这样的 attr 作为 display: none; 在 Raphael 中，尝试 .attr({opacity:0}) 或 .hide()...
• ...但是...不要!你的 mouseover 事件创建矩形，你的 mouseout 事件...隐藏它们...？您将拥有越来越多的不可见矩形堆栈，最终可能会使某人的浏览器崩溃。要么显示，然后隐藏，要么创建，然后删除——不要创建然后隐藏!

mouseover/mouseout 事件本身其实没问题! :-)