Javascript 拉斐尔悬停事件和调整大小框在第三次鼠标悬停后发生故障

编辑：

第三次我将鼠标悬停在圆上时，矩形变大，不再消失

绘制文本和矩形的代码取自；我需要让矩形的大小取决于文本的大小，我不能预先定义它

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

---

很抱歉，代码间距太大，复制/粘贴几次后，它就被弄乱了。

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

Uncaught ReferenceError: recttext is not defined 

因为变量

recttext

在第二个函数中不可见。变量

el

和

txt

也可能发生类似情况。您没有在第一个函数中使用

var el=…

，因此它是在全局空间中定义的，在第二个函数中可以看到，没有问题

您必须将

recttext

的定义移出悬停函数（并添加变量

el

和

txt

）：

在JavaScript中，如果第一次使用变量时未使用

var

，则将其放置在全局空间中。这就是为什么到处都可以看到变量

el

和

txt

。变量

recttext

是用

var

定义的，因此它的作用域是第一个函数。将它们放在悬停函数之外，我们将它们全部设置为全局

---

JSFIDLE中的示例仍然显示闪烁。使用的版本是2.1.0。对于2.1.2版，没有闪烁。最新的Raphael库是2.1.2：贡献者请求修复bug的里程碑。

有了你的帮助，我就快到了。（我是一名R和VBA程序员，在javascript中遇到了一些学习曲线问题，但你可能会认为我知道全局变量和局部变量之间的区别。）新的JSFIDLE已经存在，唯一的错误是我不知道如何让框重新出现。如果我要这样做的话，我真的需要一个IDE。唯一应该做的更改（与第一个改进的fiddle示例相比）是：

var recttem，el，txt。在这个最新的例子中，你让情况变得更糟。如果有什么明显的东西我没有得到，我很抱歉，但我想我已经按照你的建议做了，现在在第三次悬停时，盒子变得巨大并开始疯狂地闪烁：你有哪个版本的拉斐尔图书馆。我的是2.1.2。好的，我从源代码中看到：它是2.1.0。将source中的版本更改为2.1.2，然后重试。看起来好多了，2.1.0版的时候我也在闪，而2.1.2版没有。
var recttext, el, txt;

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