Question

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

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代码中）在Raphael中没有attr和display: none;，请尝试.attr({opacity:0})或.hide() ......
...但是......不要！您的鼠标悬停事件会创建矩形，您的mouseout事件...... 隐藏它们......？你将拥有一堆不断增长的隐形矩形，最终可能会使某人的浏览器崩溃。显示，然后隐藏或创建，然后删除 - 不要创建然后隐藏！

mouseover / mouseout事件本身实际上很好！： - ）

RaphaelJS隐藏形状onmouseout

1 个答案:

jsfiddle