kinetic.js多個點擊事件，在一個循環中，但只註冊的最後一個

Question

我有這樣的代碼：

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

這裏的問題。對於設置對象中的每個屬性，我想向它添加一個單擊事件。 （如上所示）

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

所以當踢被踢，它觸發踢的聲音，當點擊所述圈套它觸發圈套聲音等等...在每個設置屬性的聲音屬性描述了聲音應該播放。

問題是，所有的點擊事件都會觸發'帽子'的聲音。我發現這是因爲'帽子'屬性是設置對象中的最後一個屬性。

我在做什麼錯了？是否因爲回調？

如果您訪問here，您將看到一個示例。

此外，在這個例子中，如果你雙擊它，它只會觸發一次，當它應該觸發兩次！那是怎麼回事？

Answer 1

我認爲是這樣的：將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); 
} 

Answer 2

我找到了一個解決方案。我沒有在點擊回調事件中引用setup[name].sound，而是將圖像名稱屬性設置爲名稱，然後使用傳遞給函數的鼠標事件獲取名稱，如下所示：

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