Question

第三次将鼠标悬停在圆圈上方时，矩形变得巨大，不再消失。

绘制文本和矩形的代码取自this post;我需要让矩形的大小取决于文本的大小，我不能事先定义它。

var rsr = Raphael("holder", '1160', '1400');

xpos = 200;
ypos = 200;
rad = 50;

cir = rsr.circle(xpos, ypos, rad);
cir.attr({
        fill: '#444',
      'fill-opacity': 1,
        stroke: 'none'
    });

cir.hover(function() {
  this.animate({ r: rad*1.2 }, 200);
var recttext = rsr.set();
el = rsr.rect(0, 0, 0, 0, 3);
el.attr({fill: '#fff'});
txt = rsr.text(4,10, "Title text").attr({"text-anchor":"start",fill:'#000000',"font-        size": 12});
recttext.push(el);
recttext.push(txt);
var att = {width:recttext.getBBox().width, height:recttext.getBBox().height};
el.attr(att);
recttext.translate(xpos - recttext.getBBox().width/2, ypos - rad - 20);
}, function() {
  this.animate({ r: rad }, 100);
  recttext.remove();
  el.remove();
      txt.remove();
    });

对于代码间距很抱歉，经过一些复制/粘贴后它被破坏了。

Answer 1

您的代码中有错误。第二个函数返回错误消息：

Uncaught ReferenceError: recttext is not defined

因为变量recttext在第二个函数中不可见。变量el和txt也可能发生类似情况。您没有在第一个函数中使用var el = ...，因此它在全局空间中定义，在第二个函数中看到没有问题。

您必须将recttext的定义移出悬停函数（并添加变量el和txt）：

var recttext, el, txt;

cir.hover(function() {
    this.animate({ r: rad*1.2 }, 200);
    recttext = rsr.set();
    ...

在JavaScript中，如果首次使用变量而没有var，则将其置于全局空间中。这就是变量el和txt随处可见的原因。变量recttext使用var定义，因此它的范围限定为第一个函数。将它们置于悬停功能之外我们将它们全部设置为全局。

jsfiddle中的示例仍显示闪烁。使用的版本是2.1.0。 2.1.2版本没有闪烁。最新的Raphael库是2.1.2：里程碑，用于修复贡献者提取请求的错误。

拉斐尔悬停事件以及调整大小框在第三次鼠标悬停后崩溃

1 个答案: