Question

我正在尝试使用Raphael创建一个简单的播放/暂停按钮系统，但我一直在考虑范围问题。

由于Raphael，按钮本身只是嵌入SVG标签的图像。目标是实现这个“事件周期”：

如果显示play.png，onmouseover remove() play.png并显示play-hover.png
如果显示play-hover.png，onclick remove() play-hover.png show pause.png
如果显示pause.png，onmouseover remove() pause.png show pause-hover.png
如果显示pause-hover.png，onclick remove() pause-hover.png show play.png

这看起来真的很愚蠢，但我确实在范围和闭包方面存在问题。这是我目前的代码：

  function toPlay(pauseHover) {
    pauseHover.remove();
    var play = paper.image("images/play.png", Img.X, Img.Y, Img.height, Img.width);
    play.node.onmouseover = toPlayHover(play);
  }

  function toPause(playHover) {
    playHover.remove();
    var pause = paper.image("images/pause.png", Img.X, Img.Y, Img.height, Img.width);
    pause.node.onmouseover = toPauseHover(pause);
  }

  function toPlayHover(play) {
    play.remove();
    var playHover = paper.image("images/play-hover.png", Img.X, Img.Y, Img.height, Img.width);
    playHover.node.onclick = toPause(playHover);
  }

  function toPauseHover(pause) {
    pause.remove();
    var pauseHover = paper.image("images/pause-hover.png", Img.X, Img.Y, Img.height, Img.width);
    pauseHover.node.onclick = toPlay(pauseHover);
  }

  var play = paper.image("images/play.png", Img.X, Img.Y, Img.height, Img.width);
  toPlayHover(play);

我不知道为什么这不起作用，因为firebug没有在控制台中给我任何错误，但我认为这是因为toPlayHover()函数不能在{{1}内调用功能。

提前感谢您的帮助！

Answer 1

这是因为您立即调用每个函数而不是将其注册为回调函数。要修复，请将每个回调包装在一个匿名函数中，如下所示：

play.node.onmouseover = function() { toPlayHover(play); };

事件调用和范围问题

1 个答案: