Clicking on a div's scroll bar fires the blur event in I.E

Question

I have a div that acts like a drop-down. So it pops-up when you click a button and it allows you to scroll through this big list. So the div has a vertical scroll bar. The

Answer 1

Late answer, but I had the same issue and the current answers didn't work for me.

The hover state of the popup element works as expected, so in your blur event you can check to see if your popup element is hovered, and only remove/hide it if it isn't:

$('#element-with-focus').blur(function()
{
    if ($('#popup:hover').length === 0)
    {
        $('#popup').hide()
    }
}

You'll need to shift focus back to the original element that has the blur event bound to it. This doesn't interfere with the scrolling:

$('#popup').focus(function(e)
{
    $('#element-with-focus').focus();
});

This does not work with IE7 or lower - so just drop support for it...

Example: http://jsfiddle.net/y7AuF/