单击子元素时阻止父类

Prevent parent class when child element is clicked

本文关键字：父类 元素 单击      更新时间：2023-09-26

正如您将从我创建的bootply中看到的，当您单击面板中的任何位置时，输入将变为活动。当我点击信息按钮（橙色图标）时，它应该会打开一个手风琴，而父项（输入）不会变为活动状态。问题是父对象仍然处于活动状态。

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

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

但这会阻止信息按钮（橙色图标）完全工作（手风琴不会打开）。

以下是没有上述片段的bootply-http://www.bootply.com/ZKoCxNfMqc这里有一个片段-http://www.bootply.com/WW3Ze2DEpg

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

更新示例

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

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

相关文章：