title: Prevent clicking scrollbar from triggering .blur
body: <p>I wrote a custom dropdown list for a web app I'm working on and I have a specific set of functionality I want to accomplish with it. First of all, I want the dropdown to stay open if you move the mouse off of the menu. I want it to close when you either re-click the dropdown title, click one of the elements in the dropdown, or click anywhere else on the page. I also need to enable a scroll bar in the dropdown item list if there are too many elements. We're using a standard resolution so I'm accomplishing this with the max-height attribute. The way I accomplished keeping the menu open was to give the menu button focus and close the menu items when on the .bulr() event.  The problem is .blur() triggers when the user clicks the scroll bar and the menu closes. 
  I have an example of the menu I created here: <a href="http://codepen.io/jiggawagga/pen/wmkEG" rel="nofollow">http://codepen.io/jiggawagga/pen/wmkEG</a>
  One strange thing I've found is in Google Chrome in the app I'm working on you can click on the scroll bar and the menu stays open, however in Internet Explorer it doesn't. The other weird thing is the example in Codepen.io has the exact same code as the app, but it won't stay open in Chrome. (I don't really care about other browsers this is an internal app and we only target IE 8 (bleh) and Chrome due to corporate standards)
  Below is the Javascript and HTML I'm using to handle the menu. (Again, full code and working example is at the codepen.io link above)</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="group-dropdown"&gt;
    &lt;a href="#" id="group-dropdown-title"&gt;
      GROUP NAME &lt;span id="group-dropdown-indicator-arrow" class="arrow arrow-down"&gt;&lt;/span&gt;
    &lt;/a&gt;
    &lt;div id="group-dropdown-item-container"&gt;
      &lt;div class="group-dropdown-item" data-bind="1234567"&gt;
          &lt;a href="#"&gt;
            &lt;span class="group-dropdwon-item-name"&gt;GROUP 2 NAME&lt;/span&gt;
            &lt;br /&gt;
            &lt;span style="color: #daa520;"&gt;INPROGRESS&lt;/span&gt;
            &lt;span style="color: #0065a4;"&gt;&lt;b style="color: black;"&gt;Group Number:&lt;/b&gt; 1651651&lt;/span&gt;
            &lt;span style="color: #0065a4;"&gt;&lt;b style="color: black;"&gt;BCBS Number:&lt;/b&gt; 61565&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="group-dropdown-item" data-bind="1651651"&gt;
          &lt;span class="group-dropdwon-item-name"&gt;GROUP 3 NAME&lt;/span&gt;
          &lt;br /&gt;
          &lt;span style="color: green;"&gt;ACTIVE&lt;/span&gt;
          &lt;span style="color: #0065a4;"&gt;&lt;b style="color: black;"&gt;Group Number:&lt;/b&gt; 1651651&lt;/span&gt;
          &lt;span style="color: #0065a4;"&gt;&lt;b style="color: black;"&gt;BCBS Number:&lt;/b&gt; 61565&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="group-dropdown-item" data-bind="1651651"&gt;
          &lt;span class="group-dropdwon-item-name"&gt;GROUP 3 NAME&lt;/span&gt;
          &lt;br /&gt;
          &lt;span style="color: green;"&gt;ACTIVE&lt;/span&gt;
          &lt;span style="color: #0065a4;"&gt;&lt;b style="color: black;"&gt;Group Number:&lt;/b&gt; 1651651&lt;/span&gt;
          &lt;span style="color: #0065a4;"&gt;&lt;b style="color: black;"&gt;BCBS Number:&lt;/b&gt; 61565&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="group-dropdown-item" data-bind="1651651"&gt;
          &lt;span class="group-dropdwon-item-name"&gt;GROUP 3 NAME&lt;/span&gt;
          &lt;br /&gt;
          &lt;span style="color: green;"&gt;ACTIVE&lt;/span&gt;
          &lt;span style="color: #0065a4;"&gt;&lt;b style="color: black;"&gt;Group Number:&lt;/b&gt; 1651651&lt;/span&gt;
          &lt;span style="color: #0065a4;"&gt;&lt;b style="color: black;"&gt;BCBS Number:&lt;/b&gt; 61565&lt;/span&gt;
      &lt;/div&gt;
      &lt;div class="group-dropdown-item" data-bind="1651651"&gt;
          &lt;span class="group-dropdwon-item-name"&gt;GROUP 3 NAME&lt;/span&gt;
          &lt;br /&gt;
          &lt;span style="color: green;"&gt;ACTIVE&lt;/span&gt;
          &lt;span style="color: #0065a4;"&gt;&lt;b style="color: black;"&gt;Group Number:&lt;/b&gt; 1651651&lt;/span&gt;
          &lt;span style="color: #0065a4;"&gt;&lt;b style="color: black;"&gt;BCBS Number:&lt;/b&gt; 61565&lt;/span&gt;
        &lt;/div&gt;
      &lt;div class="group-dropdown-item" data-bind="1651651"&gt;
          &lt;span class="group-dropdwon-item-name"&gt;GROUP 3 NAME&lt;/span&gt;
          &lt;br /&gt;
          &lt;span style="color: red;"&gt;TERMINATED&lt;/span&gt;
          &lt;span style="color: #0065a4;"&gt;&lt;b style="color: black;"&gt;Group Number:&lt;/b&gt; 1651651&lt;/span&gt;
          &lt;span style="color: #0065a4;"&gt;&lt;b style="color: black;"&gt;BCBS Number:&lt;/b&gt; 61565&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  var _menuOpen = false;
  $('#group-dropdown-title').click(function () {
              if (_menuOpen) {
                  $('#group-dropdown-title').blur();
                  $('#group-dropdown-title').removeClass('hovered');
                  $('#group-dropdown-item-container').hide();
                  flipArrow('down');
                  _menuOpen = false;
              }
              else {
                  $('#group-dropdown-title').focus();
                  $('#group-dropdown-title').addClass('hovered');
                  $('#group-dropdown-item-container').show();
                  flipArrow('up');
                  _menuOpen = true;
              }
          });
  
          $('#group-dropdown-title').blur(function (e) {
                  $('#group-dropdown-title').removeClass('hovered');
                  $('#group-dropdown-item-container').hide();
                  flipArrow('down');
                  _menuOpen = false;
          });
  
  function flipArrow(direction) {
      if (direction.toLowerCase() === 'up') {
          $('#group-dropdown-indicator-arrow').removeClass('arrow-down');
          $('#group-dropdown-indicator-arrow').addClass('arrow-up');
      } else if (direction.toLowerCase() === 'down') {
          $('#group-dropdown-indicator-arrow').removeClass('arrow-up');
          $('#group-dropdown-indicator-arrow').addClass('arrow-down');
      }
  }
  </code></pre>