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

逻辑检查

我们在您图像的加载事件中进行检查:

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:显然这个解决方案是对您当前困境的补充。也许将这种原则应用到您自己的数组变量中，从而最大限度地减少一些多余的代码，对您会很有帮助。