RaphaelJS隐藏形状onmouseout

时间:2012-12-14 18:56:50

标签: raphael onmouseover onmouseout

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

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

1 个答案:

答案 0 :(得分:4)

你有javascript范围问题(加上另外两个小问题,见下文)。

变量showbox在函数aa中定义。所以你的onmouseout功能无法看到它。获取Firebug或浏览器的等效内容,您将看到一堆showbox is not defined错误。

提示:在使用Raphael时,我通常创建一个包含所有已创建对象的对象或数组,键入以便于访问,并在我所有与Raphael相关的功能上进行范围设置,以便所有这些功能都可以访问它(见下面的jsfiddle示例)。

如何访问您的Raphael对象是一个应用程序设计,您需要尽早决定,否则您需要进行大量的重构(在那里,它会受到伤害) !)。

以下是适用于您的代码的改编版本:

jsfiddle

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


它还解决了其他两个问题

  • (在jsfiddle代码中)在Raphael中没有attrdisplay: none;,请尝试.attr({opacity:0}).hide() ......
  • ...但是......不要!您的鼠标悬停事件会创建矩形,您的mouseout事件...... 隐藏它们......?你将拥有一堆不断增长的隐形矩形,最终可能会使某人的浏览器崩溃。显示,然后隐藏或创建,然后删除 - 不要创建然后隐藏!

mouseover / mouseout事件本身实际上很好! : - )