javascript - Prevent triggering of parent group (group events bubble up) -

javascript - Prevent triggering of parent group (group events bubble up) -

if add together eventhandler grouping (not element rectangle) , grouping contains grouping eventhandler , trigger event on kid grouping (click), trigger parents eventhandler. fiddle how can prevent parent triggered? if add together handlers rectangles, 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); })

you have alter lastly 4 lines prevent event propagating on it's parents:

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

updated fiddle

javascript snap.svg