raphael - Raphael.js onmouseover onmouseout 事件

Question

我使用for 循环在 raphael.js 中制作了 4 个矩形。当我应用诸如 onmouseover 或 onmouseout 之类的事件时，它仅适用于创建的最后一个矩形。我知道我的代码有问题。请提供解决方案，有没有办法简化代码？

JS小提琴链接

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);
    }
}
}

​​​