javascript - 防止触发父组(组事件冒泡)

Question

如果您将事件处理程序添加到一个组(而不是像矩形这样的元素)并且该组还包含一个带有事件处理程序的组并且您在子组上触发事件(单击)，它也会触发父事件处理程序。 Fiddle你怎么能防止 parent 被触发？如果您将处理程序添加到矩形，则事件不会冒泡。

    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

您只需更改最后 4 行即可防止事件在其父项上传播:

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

updated FIDDLE