Removing a shape from Kinetic.Group

Question

I have a Kinetic.Group that contains inside of it some shapes and images. I defined a function to delete images on double-click, here's my code :

img.on("dblclick dbltap", function (e) {
        if (e.which != 3) {
            img.getParent().listening(false); //the parent here is the group
            var r = confirm("Are you sure you want to delete this equipment?");
            if (r == true) {
               this.remove();
               layer.draw(this);
               stage.add(layer);
               img.getParent().listening(true);
            }
       }
});

Knowing that the group has the exact same function for deleting (except of course I'm not calling the listening() method).

group.on("dblclick dbltap", function (e) {
    if (e.which != 3) {
        var r = confirm("Do you want to delete this?\n\nWarning: You risk to lose its children.");
        if (r == true) {
            this.removeChildren();
            this.remove();
            layer.draw();
            stage.add(layer);
        }
    }
});

The problem comes when I double-click on an image and click ok, so I'm getting two popups:

• the first one is asking to confirm if I want to delete the image
• the second asks if I want to delete the group.

Doesn't .listening(false); disable listening to events in KineticJS? What am I doing wrong?

Answer 1

What you're trying to achieve, is that the event doesn't propagate through the children elements. In KineticJS you can do this with event.cancelBubble = true;

So you can you use:

group.on('click', function(e) {
    e.cancelBubble = true;
});

See HTML5 Canvas Cancel Event Bubble Propagation with KineticJS