javascript - 拉斐尔，鼠标悬停和鼠标移开

Question

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

问题是，当鼠标悬停在红色矩形上时，它开始闪烁和/或消失，正如您在此 jsfiddle 中看到的那样

我什至为红色矩形的鼠标悬停事件添加了一个警报，但它从未被触发。这段代码有什么问题？

这是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 上获得 mouseover 时，您首先在 r1 上获得 mouseout。为了防止它做任何事情，您可以检查事件的 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();
    }
});