title: hide.bs.dropdown event origin/target?
body: <p>event.target passed to the hide.bs.dropdown handler is the dropdown itself, not the element starting the event.  </p>
  
  <p>How can I get the element that started the event from the hide.bs.dropdown event object?</p>
  
  <pre><code>&lt;div class="dropdown" id='drop'&gt;
      &lt;button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
          Dropdown trigger
          &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
           ...
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;button class='btn btn-primary'&gt;Other Button&lt;/button&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$('#drop').on('hide.bs.dropdown', function(e) {
      console.log(e.target);  //
  })
  </code></pre>
  
  <p>Open the dropdown, click the button, look at console.log target.<br>
  JSFiddle: <a href="http://jsfiddle.net/DTcHh/4215/" rel="nofollow noreferrer">http://jsfiddle.net/DTcHh/4215/</a></p>
  
  <p>I'd prefer not to bind a click event to the entire page if possible.</p>
  
  <p>I'm trying to prevent the dropdown from closing when certain elements are clicked on my document.</p>
  
  <p><em>Update</em> </p>
  
  <p>I ended up using this method: <a href="https://stackoverflow.com/a/19797577/2414886">https://stackoverflow.com/a/19797577/2414886</a> however I'm still hoping for a more compact solution.</p>