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

Question

我正在使用jqueryui小部件制表符。我现在的情况是在选项卡中嵌套选项卡。我只想处理父选项卡小部件(#tab)中的事件，但忽略嵌套的子(# tabs 2)。这个是可能的吗？

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/的示例