Raphael.js onmouseover onmouseout事件

Question

我在raphael.js中使用爲循環製作了4個矩形。當我應用諸如onmouseover或onmouseout之類的事件時，它僅適用於所創建的最後一個矩形。我知道我的代碼有問題。請提供解決方案，有沒有簡化代碼的方法？

JS小提琴Link

window.onload = function(){ 
    var paper = Raphael(0,0,640,540); 

    for (i=0;i<2;i++){ 
     for (j=0;j<2;j++){ 
      var boxes = paper.rect(0+(j*320),0+(i*270),320,270).attr({fill:'#303030',stroke:'white'}); 
      boxes.node.onmouseover = function() { 
       boxes.attr("fill", "blue"); 
      }; 
      boxes.node.onmouseout = function() { 
       boxes.attr("fill", "#303030"); 
      }; 
     } 
    }  
}​ 

Answer 1

這是JavaScript的一個極其常見的錯誤。您可以重新使用boxes變量，因此當任何處理程序執行時，它將指向它的最後一個值。

克服這種的常用方法是包裹循環內的代碼在函數調用：

window.onload = function() { 
var paper = Raphael(0, 0, 640, 540); 

for (i = 0; i < 2; i++) { 
    for (j = 0; j < 2; j++) { 
     (function(i, j) { 
      var boxes = paper.rect(0 + (j * 320), 0 + (i * 270), 320, 270).attr({ 
       fill: '#303030', 
       stroke: 'white' 
      }); 
      boxes.node.onmouseover = function() { 
       boxes.attr("fill", "blue"); 
      }; 
      boxes.node.onmouseout = function() { 
       boxes.attr("fill", "#303030"); 
      }; 
     })(i, j); 
    } 
} 
}