CODEWITHSUNDEEP
javascriptsnap.svg
user3756754
user3756754

Reputation: 65

Prevent triggering of parent group (group events bubble up)

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

Upvotes: 1

Views: 284

Answers (1)

nathanel
nathanel

Reputation: 94

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

Upvotes: 3

Related Questions