하위 탭을 기준으로 Parallels 탭 쇼 이벤트가 트리거되는 이유는 무엇입니까?

Question

나는 자신의 콘텐츠에 다른 탭 (아이 탭이라고 함)이있는 탭 (firsttab)을 가지고 있습니다. 우리는 tabshow-event를 첫 번째 탭에 바인딩합니다.

우리가 "childtab"탭 (Tab 1.1 - Tab 1.3) 중 하나를 클릭하면 "firsttab"의 탭 중 하나를 클릭하면 모두 잘 작동합니다 (Tab 1 - Tab 5). "firsttab"에 대한 바인딩이 트리거됩니다.

테스트 케이스 : http://jsfiddle.net/bM8Wh/

HTML :

<div id="firsttab"> 
    <ul> 
     <li><a href="#firsttab_1">Tab 1</a></li> 
     <li><a href="#firsttab_2">Tab 2</a></li> 
     <li><a href="#firsttab_3">Tab 3</a></li> 
     <li><a href="#firsttab_4">Tab 4</a></li> 
     <li><a href="#firsttab_5">Tab 5</a></li> 
    </ul> 

    <div id="firsttab_1"> 
     <div id="childtab"> 
      <ul> 
       <li><a href="#childtab_1">Tab 1.1</a></li> 
       <li><a href="#childtab_2">Tab 1.2</a></li> 
       <li><a href="#childtab_3">Tab 1.3</a></li> 
      </ul> 

      <div id="childtab_1">Tab 1.1</div>    
      <div id="childtab_2">Tab 1.2</div> 
      <div id="childtab_3">Tab 1.3</div> 
     </div> 
    </div> 
    <div id="firsttab_2">Tab 2</div> 
    <div id="firsttab_3">Tab 3</div> 
    <div id="firsttab_4">Tab 4</div> 
    <div id="firsttab_5">Tab 5</div> 
</div> 

자바 스크립트 :이 이벤트에 바인딩 때문에 tabsshow 이벤트가 childtab에 의해 triggerd 왜 내가 understande down't

$("#firsttab, #childtab").tabs(); 
$("#firsttab").bind('tabsshow', function(event, ui) { funcX(ui.index); }); 

function funcX(idx){ 
    alert('triggerd - index: ' + idx); 
} 

첫 번째 탭.

내 jquery-ticked의 답변은 다음과 같습니다. "이벤트 거품이 발생하고 대상을 확인하십시오." 그러나 나는 그가 의미하는 것을 이해합니다.

나는 내 tabsshow-이벤트 처리기를 변경하여 문제를 처리 :

$("#tabs").bind('tabsshow', 
    function(event, ui) { 
    if ((/#(.*?)$/im).exec(ui.tab.hash)[1] == this.id) 
     funcX(ui.index); 
    }); 

을하지만, 문제가 어디에 내가 이해할 것이다.

Answer 1

기본적으로 event's bubble입니다. 즉, 중지하지 않는 한 하위 요소의 이벤트가 모든 부모 요소로 이동합니다. 따라서 예를 들어 페이지의 아무 곳이나 클릭하면 해당 요소에 대한 click 이벤트가 부모 역할을합니다. document까지 계속됩니다. 이 문제는 또한 tabsshow 같은 사용자 정의 jQuery를 이벤트와 함께 발생하지만, 당신이 그것을하지 않으려면 다음과 같이 event.stopPropagation()를 사용하여 버블 링에서 이벤트를 중지 할 수 있습니다

$("#childtab").bind('tabsshow', function(event, ui) { 
    event.stopPropagation(); 
}); 

이것은 #firsttab에 발사에서 이벤트를 중지 그것 때문에 더 이상 거품이 나오지 않습니다. You can try your sample with this fix here.