Question

我有一个标签（称为firsttab），在他的内容中有另一个标签（称为childtab）。我们将tabshow-event绑定到firsttab。

如果我们点击“firsttab”中的一个标签，一切正常（标签1 - 标签5）如果我们点击其中一个“子选项卡”选项卡（选项卡1.1 - 选项卡1.3），则会触发绑定到“firsttab”的tabshow事件。

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>

JavaScript的：

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

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

我没有说明为什么tabsshow事件是由childtab触发的，因为我将此事件绑定到firsttab。

我的jquery-ticked的答案是：“事件泡沫;检查目标。”但我明白了他的意思。

我通过将我的tabsshow-event-handler更改为：

来处理问题

$("#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。任何自定义jQuery事件（例如tabsshow）也会发生此行为，但如果您不想要它，则可以使用event.stopPropagation()阻止事件冒泡，如下所示：

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

这会阻止事件在#firsttab上触发，因为它不再在那里冒泡。 You can try your sample with this fix here

为什么父项标签显示由子标签触发的事件？

1 个答案: