나는이 같은 일부 HTML 코드가

Question

stopPropagation 메소드없이 이벤트 버블 링을 중지 할 수 있습니다 방법 :

<ul> 
    <li id='root' class='tree-node'> 
     root 
     <ul> 
     <li class='tree-node' id='node1'>node1</li> 
     <li class='tree-node' id='node2'>node2</li> 
     <li class='tree-node' id='node3'>node3</li> 
     <li class='tree-node' id='node4'>node4 
      <ul> 
       <li class='tree-node' id='node4-1' >node4-1</li> 
       <li class='tree-node' id='node4-2' >node4-2</li>      
      </ul> 
     </li> 
     </ul> 
    </li> 

<ul> 

내가

을 트리 노드 클래스가 각 태그에 이벤트를 클릭 바인딩 할도 클릭 바인딩

$(".tree-node").click(function(e){ 
    console.log($(this).attr("id")); 
}); 

$(document).click(function(e){ 
    console.log("document clicked!"); 
}); 

석재에 대한 대안은 있는가 : 여기

를 문서화하는 이벤트는 내 코드입니다 pPropagation()을 사용하여 node4-2에서 부모로 이벤트 버블 링을 중지 하시겠습니까?

바이올린 : http://jsfiddle.net/R6ySc/

Answer 1

당신은 문서의 클릭 이벤트를 사용하고 거기에서 모든 것을 처리 할 수 ​​있습니다.

$(document).click(function(e){ 
    console.log("document clicked!");  
    var t = $(e.target); 
    if(t.attr("class") == "tree-node") { 
     console.log("tree node clicked"); 
    } 
});​ 

확인이 바이올린 :

$(document).on("click", ".tree-node", function(e) { 
    e.stopPropagation(); 
    console.log("tree node '" + $(this).attr("id") + "' clicked"); 
});​ 

참조 : 대안으로 http://jsfiddle.net/R6ySc/3/

은 또한 문서 (확인이에 대한 jQuery documentation)에 대한 onclick 이벤트에서 선택을 지정할 수 있습니다 , 아래의 설명을 확인하십시오