防止bootstrap可折叠元素在collapser的子节点内单击崩溃 - 没有event.stopPropagation（）

Question

不太具体，我想找到一种方法来防止在委托的侦听器元素的子节点内触发的事件触发所述侦听器。我发现与此问题相关的所有答案都说使用event.stopPropagation()来解决此问题或类似问题（https://stackoverflow.com/questions/15354713/are-all-child-elements-of-a-hyperlink-node-also-links#=，How do you make Twitter Bootstrap Accordion keep one group open?和其他问题），但这会导致问题。如果打开了引导程序下拉列表，那么它之外的任何单击都应该关闭它，但如果事件传播在子元素中停止，则它不会关闭该下拉列表（这是可以由{创建的许多错误的示例） {1}}）。

这是我的HTML：

event.stopPropagation()

我希望能够点击＆＃34;值＆＃34;跨度而不切换可折叠div的崩溃状态。

谢谢！

Answer 1

有两种方法可以实现此目的。我根据要求给出答案。

1. 如果div中的子元素没有事件或操作，则可以简单地添加onclick =“ event.stopPropagation（）;。但是请记住，这将禁用子元素的任何单击功能。仅当您希望防止单击div的一部分不折叠整个div时。

2. 如果div中的子元素在单击时有一些动作，则最好将其移出div，这意味着我们将子元素移出div元素的折叠范围，然后使用CSS将子元素移到div标签内。每次都对我有用。

<div data-toggle="collapse" href="#collapse8" class="collapse-plus-minus-left card-title text-center">
   <a data-toggle="collapse" href="#collapse8">SUB PROJECT</a>
</div>
<span class="add_span_button card-title text-center" data-toggle="modal" data-dismiss="modal_con" data-target="#myModal2" style="float:right; color:#007bff; cursor: pointer; position:relative; right:0px; bottom:32px">ADD</span>

以第二种解决方案为例，在下图中，单击“添加”按钮时，“ SUB PROJECT”分区不会折叠。这是因为ADD跨度已移出div，并且使用CSS时，其显示就像在div内一样。

Answer 2

您需要在值范围中添加一些类才能直接定位它。

$('span.value').click(function(e) {
    e.stopPropagation(); // prevents event e from going to parent
});