Javascript 拉斐尔、穆瑟弗和穆瑟特

下面代码的目的是在鼠标位于蓝色或红色矩形上方时显示红色矩形。请注意，红色矩形与蓝色矩形重叠

问题是，当鼠标位于红色矩形上方时，它开始闪烁和/或消失，如图所示

我甚至在红色矩形的鼠标悬停事件中添加了一个警报，但它从未被触发。这个代码怎么了

这是javascript：

    var r1 = null, r2 = null, over_r2 = false;
    var paper = Raphael("canvas", 600, 600); 

    r1 = paper.rect(100,100, 200,200);
    r1.attr({ "fill" : "blue"});

    r1.mouseover(function(e) {  
        if ( r2 == null ) {
            r2 = paper.rect(150,150, 200,200);
            r2.attr({ "fill" : "red"});
        }
    });

    r1.mouseout(function(e) {   
        if (r2 != null  && over_r2 == false) {
            r2.remove();
            r2 = null;
        }
    });

    r2.mouseover(function(e) {  
        over_r2 = true;
        alert("Hello");
    });

    r2.mouseout(function(e) {   
        over_r2 = false;
    });

有两个问题

• 您正在尝试在最初不存在的东西上注册处理程序，

  r2

  。只需最初创建并隐藏它。您应该在控制台上看到一个错误，

  r2。鼠标悬停

  不是一个功能
• 当你在r2上得到鼠标悬停时，你首先在r1上得到鼠标悬停。为了防止它做任何事情，您可以检查事件的

  relatedTarget

  属性

看

var r1 = null, r2 = null, over_r2 = false;
var paper = Raphael("canvas", 600, 600);

r1 = paper.rect(100,100, 200,200);
r1.attr({ "fill" : "blue"});
r2 = paper.rect(150,150, 200,200);
r2.attr({ "fill" : "red"});

r2.hide();

r1.mouseover(function(e) {
    r2.show();
});

r1.mouseout(function(e) {
    if (e.relatedTarget != r2[0]) {
        r2.hide();
    }
});


r2.mouseout(function(e) {
    if (e.relatedTarget != r1[0]) {
        r2.hide();
    }
});