상위 그룹 트리거링 방지 (그룹 이벤트 버블 업)

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