Prevent triggering of parent group (group events bubble up)

Question

If you add an eventhandler to a group (not an element like rectangle) and this group also contains a group with an eventhandler and you trigger an event on the child group (click), it will also trigger the parents eventhandler. Fiddle How can you prevent that the parent is triggered? If you add the handlers to the rectangles, the event doesn't bubble up.

    var svgElement=document.getElementById("mainSvgId");
    var s = Snap(svgElement);
    s.attr({height: 300, width: 300});

    var parentGroup=s.g().attr({id: "parent"});
    var rect1 = s.rect(0, 0, 200, 200).attr({fill: "#bada55"});
    parentGroup.add(rect1);
    parentGroup.click(function(){
        console.log("id parent: " + this.node.id);
    })

    var childGroup=s.g().attr({id: "child"});
    var rect2 = s.rect(100, 100, 30, 30).attr({fill: "#ff0055"});
    childGroup.add(rect2);
    parentGroup.add(childGroup);
    childGroup.click(function(){
        console.log("id child: " + this.node.id);
    })

Answer 1

You only have to change last 4 lines to prevent the event from propagating on it's parents:

    childGroup.click(function(e){
        e.stopPropagation()
        console.log("id child: " + this.node.id);
    })

updated FIDDLE