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

我正在尝试向图像添加点击事件（ Kinetic.Image ）我将添加到KineticJS阶段。

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

我创建了一个演示两种层次结构情况的小提琴 。

 // 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); 

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