事件调用和范围问题

Question

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

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

• 如果显示play.png，onmouseoverremove()play.png并显示play-hover.png
• 如果显示play-hover.png，onclickremove()play-hover.png 显示pause.png
• 如果显示 pause.png，onmouseover remove() pause.png 显示 pause-hover.png
• 如果显示pause-hover.png，onclickremove()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() 函数中调用。

Answer 1

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

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