Raphael.js onmouseover onmouseout 事件答案

【问题标题】：Raphael.js onmouseover onmouseout eventRaphael.js onmouseover onmouseout 事件
【发布时间】：2012-09-21 12:27:34
【问题描述】：

我使用 for 循环 在 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");
            };
        }
    }    
}

【问题讨论】：

标签： raphael mouseevent onmouseover onmouseout

【解决方案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);
    }
}
}

【讨论】：