下面代码的目的是当鼠标悬停在蓝色或红色矩形上时显示红色矩形。请注意,红色矩形与蓝色重叠。
问题是,当鼠标悬停在红色矩形上时,它开始闪烁和/或消失,正如您在此 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;
});
最佳答案
有两个问题
- 您正在尝试在最初不存在的事物上注册处理程序,
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();
}
});
关于javascript - 拉斐尔,鼠标悬停和鼠标移开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23896037/