jquery-ui - 使用带有 jqueryui 的嵌套选项卡时，如何仅从父小部件捕获事件

Question

我正在使用 jqueryui 小部件tabs。我处于标签嵌套在标签中的情况。我只想处理来自父标签小部件（#tabs）的事件，但忽略嵌套的子标签（#tabs2）。这可能吗？

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/