拉斐尔，老鼠和老鼠

Question

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

问题是，当鼠标在红色矩形上方时，它会开始闪烁和/或消失，就像您在这个小提琴中看到的那样。

我甚至向红色矩形的mouseover事件添加了一个警告，它从未被触发。这个密码怎么了？

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

Answer 1

有两个问题

• r2，您正在尝试在最初不存在的东西上注册一个处理程序。先创建它，然后隐藏它。您应该在控制台上看到一个错误，即r2.mouseover不是一个函数。
• 当您在r2上获得鼠标时，首先在r1上得到鼠标。要防止这种情况发生，可以检查事件的relatedTarget属性

请参阅http://jsfiddle.net/mendesjuan/8Zy3F/6/

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