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

Raphael hover event along with resizing box breaks down after third mouseover

本文关键字：悬停 鼠标 第三次 故障 事件 调整 Raphael      更新时间：2023-09-26

这是一个JSFiddle。

编辑：这里有一个更好的JSFiddle

当我第三次悬停在圆圈上时，矩形变得巨大，不再消失。

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

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

因为变量CCD_ 1在第二函数中不可见。变量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和recttext0随处可见的原因。变量recttext是用var定义的，因此它的作用域是第一个函数。将它们置于悬停函数之外，我们将它们全部设置为全局。

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

相关文章：