자식 DOM 객체에서 클릭 이벤트를 사용하지 않고 부모 DOM 객체에서 클릭 이벤트를 사용 중지하는 방법은 무엇입니까?

Question

나는 이런 HTML을 가지고있다.

<a class="button"> 
    <span> 
     <span> 
      <span class="buttonspan">Content</span> 
     </span> 
    </span> 
</a> 

이미 부모 앵커 객체에 어떤 이벤트가있다. 이제 하위 범위 요소에 클릭 이벤트를 추가하고 부모 앵커 개체에서 클릭 이벤트를 사용하지 않도록 설정하려고합니다. 이것을 달성하기 위해 jQuery를 사용하고 있지만 알아 내지 못했습니다. 내 jQuery 코드는 다음과 같습니다.

$('a.button').click(function(event){ 
    return false; 
}); 

$('.buttonspan').live('click', function(event){ 
    event.preventDefault(); 
    event.stopImmediatePropagation(); 
    // some function 
}); 

위 코드를 실행하면 하위 요소 클릭 이벤트도 방지됩니다. 하지만 첫 번째 부분이 아니라면 상위 클릭 이벤트가 실행됩니다. 새로 추가 된 하위 클릭 이벤트를 비활성화하지 않고 상위 이벤트를 비활성화하는 방법이 있습니까?

Answer 1

부모 버튼에 클릭 이벤트를 설정하고 이벤트 대상을 사용하여 클릭 한 내용을 확인하고 필요한 작업을 수행 할 수 있습니다.

$('a.button').click(function(e) { 
    var $target = $(e.target); 

    if ($target.is('.buttonspan')) { 
     // do actions for the .buttonspan click 
    } else { 
     // do actions for a click anywhere else inside a.button 
     e.preventDefault(); 
    } 
});