0

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

多亏了 Raphael，按钮本身只是嵌入在 SVG 标签中的图像。目标是拥有这个“事件循环”：

  • 如果显示 play.png，onmouseover remove()play.png 并显示 play-hover.png
  • 如果显示 play-hover.png，onclick remove()play-hover.png 显示 pause.png
  • 如果显示 pause.png，则onmouseover remove()pause.png 显示 pause-hover.png
  • 如果显示 pause-hover.png，则onclick remove()pause-hover.png 显示 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()无法在函数中调用该toPlay()函数。

4

1 回答 1

1

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

play.node.onmouseover = function() { toPlayHover(play); };
于 2012-06-24T00:05:39.813 回答