Javascript 为什么parrents选项卡显示由childtab触发的事件？

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

如果我们单击“firsttab”中的一个选项卡，所有工作正常（选项卡1-选项卡5） 如果单击其中一个“childtab”选项卡（选项卡1.1-选项卡1.3），则绑定到“firsttab”的tabshow事件将被触发

测试用例：

HTML:

我不明白为什么childtab会触发tabsshow事件，因为我将此事件绑定到firsttab

我的jquery的答案是：“事件冒泡；检查目标。”但我不明白他的意思

我通过将tabsshow事件处理程序更改为：

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

但是我会理解问题出在哪里。

默认情况下，意味着子元素中的事件将上升到所有父元素，除非您停止它。因此，例如，在页面上的任何位置单击都是该元素的父元素上的

单击事件，依此类推，直到
文档
。任何自定义jQuery事件（如
tabsshow
）也会发生这种行为，但如果不需要，可以使用以下命令阻止事件冒泡：

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

这将阻止事件在
#firsttab
上触发，因为它不再在那里冒泡
 好的，我想我明白了。childtab中的tabsshow事件不会被处理，因此它将被转到父元素，直到firsttab eventhandler处理tabsshow事件。但是，jquery向一个没有绑定到它的eventhandler触发事件不是“愚蠢”吗？难道jquery handel不会犯这个错误吗？我将eventhandler绑定到firsttab.tabshow-event，而不是firsttab_和_all_childs.tabshow.event，我认为jquery应该只在其引用目标excpect时触发事件。我使用“takeallchildevent”选项绑定eventhandler。第二个问题：在您的解决方案中，您将第二个eventhandler绑定到childtab。但将其绑定到所有选项卡（如：$（“DIV.ui-tabs”）.bind（'tabsshow'，function（event，ui）{event.stopPropagation（）；}）不是更好的解决方案吗@floyddotnet-所有事件都会冒泡，即使它们被处理，它们也会继续冒泡，除非
返回false
或
.stopPropagation（）
，否则这正是DOM的预期工作方式（有或没有jQuery）。对于您的第二条评论，是的，这是一种非常有效的方法，只需确保在创建选项卡后运行该方法，否则它们还没有添加
ui选项卡
类。找到元素并绑定处理程序以停止传播的任何选择器都将起作用：）
$("#tabs").bind('tabsshow',
  function(event, ui) {
    if ((/#(.*?)$/im).exec(ui.tab.hash)[1] == this.id)
      funcX(ui.index);
  });

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