將點擊事件監聽器添加到SVG位圖圖像

Question

我試圖將點擊事件監聽器添加到不同的SVG位圖圖像。每個點擊事件都應該執行不同的功能。

這裏是我的JS代碼：

<script> 
var stage; 
var images = []; 
function init() { 
    stage = new createjs.Stage("kort"); 

    addImage("/assets/images/kort.png", 0.65, 0.65, 0, 0); 
    addImage("/assets/images/kirke.png", 0.25, 0.25, 250, 250); 
    addImage("/assets/images/mølle.png", 0.4, 0.4, 335, 100); 
    addImage("/assets/images/skib.png", 0.25, 0.25, 30, 375); 
    addImage("/assets/images/hestesko.png", 0.3, 0.3, 100, 75); 

    console.log("Images added") 
    addClickEvents(); 

    function addImage(url, scaleX, scaleY, locX, locY) { 
    var image = new Image(); 
    image.src = url; 
    image.onload = function() { //indsæt kun billede når det er loadet 
     var imageBitmap = new createjs.Bitmap(image); 
     imageBitmap.x = locX; 
     imageBitmap.y = locY; 
     imageBitmap.scaleX = scaleX; 
     imageBitmap.scaleY = scaleY; 
     images.push(imageBitmap); 
     console.log("Image pushed to array"); 

     stage.addChild(imageBitmap); 
     stage.update(); 
    } 
    } 
    function addClickEvents() { 
     images[1].on("mousedown", function (evt) { 
      this.alpha = 0.1; 
      stage.update(); 
      set(0, true); 
     }); 
    } 
} 

當我運行此代碼，我收到了一個錯誤：

Uncaught TypeError: Cannot read property 'on' of undefined 
at addClickEvents ((index):52) 
at init ((index):33) 
at onload ((index):9)" 

似乎將之前運行addClickEvents（）函數圖像，所以數組是空的，所以它試圖添加一個未定義的事件。

Answer 1

可能的解決方案

It seems to run the addClickEvents() function before adding the images, so the array is empty and so it tries to add an event to undefined.

正確的我相信。

你需要一點返工，javascript的異步性要求你做這個工作有點不同。

看看功能addImage(url, sx, sy, x, y);，一個可能的解決方案是創建一個單獨的數組imagesLoaded，來實際跟蹤何時應該調用addClickEvents()函數。

新的全球陣：

var imagesLoaded = new Array(); 
imagesLoaded.push({ 
    src: "/assets/images/kort.png", 
    loaded: false 
}); 

邏輯檢查

我們做您的圖像的onload事件中的檢查：

image.onload = function() { //indsæt kun billede når det er loadet 
    /* 
     ALL YOUR CODE AS IS 
    */ 
    stage.update(); 
    //NEW CODE 
    for (i = 0; i < imagesLoaded.length; i++)   
    { 
     if (imagesLoaded[i].src == image.src) 
      imagesLoaded[i].loaded = true; 
    } 
    var allLoaded = true; 
    for (i = 0; i < imagesLoaded.length; i++)   
    { 
     if (!imagesLoaded[i].loaded) 
      allLoaded = false; 
    } 
    if (allLoaded) 
    { 
     addClickEvents(); 
    } 
    //END OF NEW CODE 
} 

希望它可以幫助你。如有評論問題。 PS：很顯然，這個解決方案是你當前困境的附加組件。它可以很好地實現這種原理到你自己的數組變量，從而最大限度地減少一些額外的代碼。