KineticJS事件未针对分组图层的子项触发

Question

我正在尝试向图片添加点击事件（Kinetic.Image）我正在添加到KineticJS舞台。

• 当我使用简单的层次结构时，如下所示（测试0），可以成功触发事件。
• 但是，在更复杂的层次结构（测试1）中添加图像时，不会触发事件。

我创建了一个Fiddle来演示这两种层次结构。

// The canvas container for the stage
var container = $("#container").html("");

// Create the stage
var stage = new Kinetic.Stage({
    container: container.attr("id"),
    width: container.width(),
    height: container.height()
}); 

// Load image
var img = new Image();
img.onload = function() {

    // Dimensions of the image
    var w = this.width;
    var h = this.height;

    // The base layer
    var baseLayer = new Kinetic.Layer({
        width: w,
        height: h
    });

    // The group
    var group = new Kinetic.Group();

    // The asset layer
    var assetLayer = new Kinetic.Layer({
        width: w,
        height: h
    });

    // The kinetic image element
    var element = new Kinetic.Image({
        image: this,
        width: w,
        height: h
    });

    // Event when image is clicked
    element.on("click", function() { alert("Image clicked"); });

    // Build hierarchy
    assetLayer.add(element);
    group.add(assetLayer);
    baseLayer.add(group);
    stage.add(baseLayer);

    // Draw the stage
    stage.draw();
}

// Load image from URL
img.src = "http://www.html5canvastutorials.com/demos/assets/lion.png";       

我认为它可能与事件冒泡有关，并尝试更改图层上的listening属性，但不幸的是，这没有任何区别。任何建议都将不胜感激。

Answer 1

我觉得你不能将Kinetic.Layer分组，只能Kinetic.Shape。请参阅本教程中的措辞：http://www.html5canvastutorials.com/kineticjs/html5-canvas-complex-shapes-using-groups-with-kineticjs/

我改变了你的小提琴中的两行，我开始工作了：

替换：

assetLayer.add(element);
group.add(assetLayer);

使用：

//assetLayer.add(element);
group.add(element);

瞧！警报会触发图像上的“点击”。