Question

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

    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

防止触发父组（组事件冒泡）

1 个答案: