jQuery 버튼 내부의 스팬 클릭

Question

더 큰 솔루션의 일부인 jQuery 토글 버튼으로 헤더를 구현하는 accordion 유형의 jQuery 컨트롤이 있습니다. 각 헤더에는 도움말 풍선이 있어야합니다. 요약하면에 게시 된 설정과 비슷합니다.

<div id="button1">Go to main action <span id="span1" style="color:blue">Help</span>  </div> 
<div id="out"/> 
$('#button1').button().click(function(){ 
    $('#out').text('Button clicked'); 
}); 

$('#span1').click(function(){ 
    $('#out').text('Span clicked'); 
}); 

이렇게하면 버튼 div 안에있는 도움말 범위를 클릭 할 수 있습니까? 또는 버튼은 항상 모든 콘텐츠에 대한 이벤트를 가져 와서 내부 요소가 클릭 이벤트를받지 못하도록합니다.

감사합니다.

Answer 1

귀하의 이벤트는 먼저 span에 발생하고 button에도 발생합니다. stopPropagation() 메소드를 통해 이벤트가 부모에게 실행되지 않도록 할 수 있습니다. 또한 return false도 마찬가지입니다.

Fiddle for demonstration

$('#span1').click(function(e){ 
    $('#out').text('Span clicked'); 
    e.stopPropagation(); 
}); 

Answer 2

나 :

$('#span1').click(function(){ 
    $('#out').text('Span clicked'); 
    return false; 
}); 

jSfiddle http://jsfiddle.net/kxntf/5/