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上获得鼠标悬停时，首先会在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();
    }
});

Raphael，mouseover和mouseout

1 个答案: