title: Prevent bootstrap dropdown from closing when clicked on drag
body: <p>I got a dropdown with a <a href="https://github.com/leoselig/jsFancyScroll" rel="nofollow">fancy scroll</a> in it. Fancy Scroll is a really simple library that replaces the default scroll. And just by adding some HTML markup, the scroll works without even having to initialize it using javascript.</p>
  
  <p>After debugging to see what was going on, I found that <strong>bootstrap</strong> is making my dropdown hide when clicking on the drag.</p>
  
  <p>The event is '<strong><em>hide.bs.dropdown</em></strong>'.</p>
  
  <p>By now, I have attempted so many things, managed to make it work, but the only problem is, whenever I start dragging, due to the stopPropagation() function, it will keep scrolling nan-stap even though I released the mouse click. </p>
  
  <p>These are a few things I've tried while googling, thing is, none of the solved answers involved this case scenario, having a scrollbar in it:</p>
  
  <pre><code>      $('.dropdown-menu input, .dropdown-menu label, .thumb', element).click(function(e) {
          e.preventDefault();
          e.stopPropagation();
        });
  
        $('.thumb', element).on('mouseup', function(e) {
           e.preventDefault();
           e.stopImmediatePropagation();
           return false;
        });
  
        $('.dropdown-menu .scrollbarY', element).click(function(e) {
          e.stopImmediatePropagation();
        });
  
        $(element).on("hide.bs.dropdown",function(e) {
          e.preventDefault();
          return false;
        });
  </code></pre>
  
  <p>The behavior I'm looking for is, clicking on the scroll drag (.thumb) wouldn't close the dropdown, but if there's a click on one of the items or away from dropdown, it should close it.</p>