title: Prevent collapse of bootstrap collapsible element from click within a child of the collapser -- without event.stopPropagation()
body: <p>Less specifically, I want to find a way to prevent an event triggered within the child of the delegated listener element from triggering said listener. All the answers I have found related to this question say to use <code>event.stopPropagation()</code> to solve this or similar problems (<a href="https://stackoverflow.com/questions/15354713/are-all-child-elements-of-a-hyperlink-node-also-links#_=_">https://stackoverflow.com/questions/15354713/are-all-child-elements-of-a-hyperlink-node-also-links#<em>=</em></a> , <a href="https://stackoverflow.com/questions/15725717/how-do-you-make-twitter-bootstrap-accordion-keep-one-group-open">How do you make Twitter Bootstrap Accordion keep one group open?</a> , and others), but that causes an issue. If a bootstrap dropdown is open, any click outside of it is supposed to close it, but if the event propagation is stopped within the child element, it does not close that dropdown (that is an example of many bugs that could be created by <code>event.stopPropagation()</code>).</p>
  
  <p>Here is my html:</p>
  
  <pre><code>&lt;div id="collapser" data-toggle="collapse" data-target="#collapseDiv"&gt;
      &lt;p&gt; Title of Section &lt;/p&gt;
      &lt;span&gt; value &lt;/span&gt;
      &lt;span class="glyphicon glyphicon-chevron-down"&gt;&lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="collapseDiv"&gt;
      &lt;!-- collapsible content --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to be able to click on the "value" span without toggling the collapse state of the collapsible div.</p>
  
  <p>Thanks!</p>