div 이벤트의 이벤트에 대한 트리거 이벤트

Question

이벤트에 div가 있고 클릭 할 때 뭔가를하려면 div가 있고 그 div에는 항목 목록이 들어 있으며 각 항목에도 이벤트가 있습니다. 내가하려는 것은 클릭 한 항목에 대한 이벤트 만 트리거하는 것이지 항목과 컨테이너의 이벤트 모두에 대해서는 트리거하지 않는 것입니다. fiddle

<div class="container"> 
    <ul> 
     <li>action 1</li> 
     <li>action 2</li> 
     <li>action 3</li> 
    </ul> 
</div> 
<div id="result"></div> 

$('.container').click(function(){ 
    var x = document.getElementById('result'); 
    $(x).append(' container clicked'); 
}); 

$('.container ul').on('click','li',function(e){ 
    e.preventDefault(); 
    var x = document.getElementById('result'); 
    $(x).append(' li clicked'); 
}); 

Answer 1

당신은 억제 할 기본 동작이 없습니다로 e.stopPropagation()

$('.container ul').on('click','li',function(e){ 
    e.stopPropagation(); 
    var x = document.getElementById('result'); 
    $(x).append(' li clicked'); 
}); 

e.preventDefault();가 사라질 수 있어야합니다. ,

$('.container ul').on('click','li',function(e){ 
    e.stopPropagation(); 
    $("#result").append(this);//move the clicked LI element to the container #result 
}); 

Answer 2

사용 stopPropagation

$('.container ul').on('click','li',function(e){ 
    e.stopPropagation(); 

    var x = document.getElementById('result'); 
    $(x).append(' li clicked'); 
}); 

Example