Javascript kinetic.js在循环中多次单击事件，但仅注册最后一个

我有以下代码：

var load_image = function( src ){
    var img = new Image();
    img.src = src;
    return img;
};

var stage = new Kinetic.Stage({container: 'main', width: 640, height: 480});
var layer = new Kinetic.Layer();

var setup = {
    kick : {
        sound: 'kick',
        image_config : {
            image : load_image( '/images/bass.png' ),
            x : 250,
            y : 50
        }
    },
    snare : {
        sound: 'snare',
        image_config : {
            image : load_image( '/images/snare.png' ),
            x : 220,
            y : 220
        }
    },
    hats : {
        sound: 'hats',
        image_config : {
            image : load_image( '/images/hi-hat.png' ),
            x : 140,
            y : 150
        }
    }
};

var img;

for ( name in setup )
{
    img = new Kinetic.Image( setup[name].image_config );

    img.on('click', function()
    {
        soundManager.play( setup[name].sound );
    });

    img.createImageHitRegion(function()
    {
        layer.drawHit();
    },true);

    layer.add(img);
}

stage.add(layer);

问题出在这里。对于设置对象中的每个属性，我想向其添加一个单击事件。（如上所示）

所以当踢腿时，它会触发踢腿声，当圈套被点击时，它会触发圈套声等等。。。每个设置属性中的声音属性描述应播放的声音

问题是，所有单击事件都会触发“hats”声音。我发现这是因为“hats”属性是setup对象中的最后一个属性

我做错了什么？是因为回调吗

如果你去参观，你会看到一个例子

---

此外，在本例中，如果双击，它只会触发声音一次，而应该触发两次！这是怎么回事？

我认为是这样的：将var从for循环外部移动到for循环内部。因为

var img

使它成为一个单独的变量，您每次循环运行时都会重新定义它，所以它只保留最后一个设置

相反，您需要添加一些局部作用域，以便函数不会在每次循环运行时重新写入变量。 尝试在循环中创建一个局部变量，如下所示

for ( name in setup )
{
    var newImg = new Kinetic.Image( setup[name].image_config );

    newImg.on('click', function()    
    {
        soundManager.play( setup[name].sound );
    });

    newImg.createImageHitRegion(function()
    {
        layer.drawHit();
    },true);

    layer.add(newImg);
}

---

我找到了解决办法。我没有在单击回调事件中引用

setup[name].sound

，而是将image name属性设置为name，然后使用传递给函数的鼠标事件获取名称，如下所示：

var-img

for ( name in setup )
{
    img = new Kinetic.Image( setup[name].image_config );

    img.attrs.name = name;

    img.on('click', function(i)
    {
        soundManager.play( i.shape.attrs.name );
    });

    img.createImageHitRegion(function()
    {
       layer.drawHit();
    },true);

    layer.add(img);
}

---

另外，您能把这段代码放到JSFIDLE中吗？我知道你的例子是在线的，但是JSFIDLE会有所帮助。你能选择正确的答案，这样就不会再被标记为未回答的问题了吗？

for ( name in setup )
{
    img = new Kinetic.Image( setup[name].image_config );

    img.attrs.name = name;

    img.on('click', function(i)
    {
        soundManager.play( i.shape.attrs.name );
    });

    img.createImageHitRegion(function()
    {
       layer.drawHit();
    },true);

    layer.add(img);
}