javascript - グループ化されたレイヤーの子に対して KineticJS イベントが発生しない

Question

Kinetic.ImageKineticJS ステージに追加している画像 ( ) にクリック イベントを追加しようとしています。

• 以下に示すように (テスト 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、レイヤーのプロパティを変更してみましたが、残念ながら変わりませんでした。アドバイスをいただければ幸いです。