javascript - 单击子元素时阻止父类

Question

正如您从我创建的 bootply 中看到的那样，当您单击面板中的任意位置时，输入将变为事件状态。当我单击信息按钮(橙色图标)时，它应该打开一个 Accordion ，而父项(输入)不会变为事件状态。问题是 parent 仍然变得活跃。

我可以通过添加来解决这个问题:

$('.tickets-more').click(function(){
   event.stopPropagation();
});

但这会阻止信息按钮(橙色图标)完全工作( Accordion 无法打开)。

这是没有上述代码片段的 bootply - http://www.bootply.com/ZKoCxNfMqc 这是片段 - http://www.bootply.com/WW3Ze2DEpg

Answer 1

当目标元素没有 info-sign 类时，只需添加/删除该类即可。

Updated Example

$(".ticket-selector").off('click');
$(".ticket-selector").on('click', function(e){
  if(!$(e.target).hasClass('info-sign')) {
    $(".ticket-selector").removeClass("active");
    $(this).addClass("active");
  }
});

..正如其他人已经说过的，您还应该避免将所有内容放在 label 元素中。