クリックイベントリスナーを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);を見てみると、addClickEvents()関数を呼び出すときに実際に追跡するために、imagesLoadedという別の配列を作成することが考えられます。

新しいグローバル配列：

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：明らかに、このソリューションはあなたの現在の苦境へのアドオンです。おそらくこの種の原則を独自の配列変数に実装することで、余分なコードを最小限に抑えることができます。