在jqueryui中使用嵌套选项卡时，如何仅从父窗口小部件中捕获事件

Question

我正在使用jqueryui小部件tabs。我的情况是我在选项卡中嵌套了标签。 我想只处理父标签窗口小部件（#tabs）中的事件，但忽略嵌套子窗口（＃tabs2）。这可能吗？

Example on jsFiddle

HTML：

<div id="tabs">
  <ul>
    <li><a href="#fragment-1"><span>One</span></a></li>
    <li><a href="#fragment-2"><span>Two</span></a></li>
  </ul>
  <div id="fragment-1">
    1st
    <div id="tabs2">
      <ul>
        <li><a href="#fragment2-1"><span>One</span></a></li>
        <li><a href="#fragment2-2"><span>Two</span></a></li>
      </ul>
      <div id="fragment2-1">
        1st
      </div>
      <div id="fragment2-2">
        2nd
      </div>
    </div>
  </div>
  <div id="fragment-2">
    2nd
  </div>
</div>

<div id="debug"></div>

JS：

$( "#tabs" ).on( "tabsactivate", function( event, ui ) {

    // This code will execute whether the event came from #tabs or #tabs2

    $("#debug").text("Activated tab " + ui.newPanel.selector);
} );

输出：

Answer 1

由于子元素触发相同的事件，您需要过滤来自子元素的事件 它可以这样做：

$("#tabs" ).on("tabsactivate", function( event, ui ) {
    if(this !== event.target)
    {
        return false;
    }
    $("#debug").text("Activated tab " + ui.newPanel.selector);
});

这是一个小提琴样本 http://jsfiddle.net/nQsDK/4/