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

user_155909 0
Viewed 28221

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 div is supposed to disappear if you click outside of the div, i.e. on blur.

The problem is that when the user clicks on the div's scrollbar, IE wrongly fires the onblur event, whereas Firefox doesn't. I guess Firefox still treats the scrollbar as part of the div, which I think is correct. I just want IE to behave the same way.

onblur internet-explorer jquery javascript
8 Answers

I'm having a similar problem with IE firing the blur event when you click on a scrollbar. Apparently it only happens n IE7 and below, and IE8 in quirksmode.

Here's something I found via Google

https://prototype.lighthouseapp.com/projects/8887/tickets/248-results-popup-from-ajaxautocompleter-disappear-when-user-clicks-on-scrollbars-in-ie6ie7

Basically you only do the blur if you know the person clicked somewhere on the document other than the currently focused div. It's possible to inversely detect the scrollbar click because document.onclick doesn't fire when you click on the scrollbar.

user_181460

I had the same probleme. Resolved by putting the menu in a wrapping (bigger) div. With the blur applied to the wrapper, it worked!

user_2567620

I don't think this is an IE issue.

It's more a case of how to design your interaction and where to handle which event. If you have a unique css-class-accessor for the related target, canceling a blur event can be done by checking the classList of the event.relatedTarget for the element you want to allow or disallow to initiate the blur event. See my onBlurHandler from a custom autocomplete dropdown in an ES2015 project of mine (you might need to work around contains() for older JS support):

onBlurHandler(event: FocusEvent) {
  if (event.relatedTarget 
      && (event.relatedTarget as HTMLElement).classList.contains('folding-select-result-list')) {
    // Disallow any blur event from `.folding-select-result-list`
    event.preventDefault();
  } else if (!event.relatedTarget
      || event.relatedTarget 
      && !(event.relatedTarget as HTMLElement).classList.contains('select-item')) {
    // If blur event is from outside (not `.select-item`), clear the suggest list
    // onClickHandler of `.select-item` will clear suggestList as configured with this.clearAfterSelect
    this.clearOptions(this.clearAfterBlur);
  }
}
  • .folding-select-result-list is my suggestions-dropdown having 'empty spots' and 'possibly a scrollbar', where I don't need this blur event.
  • .select-item has it's own onClickHandler that fires the XHR-request of the selection, and closes the dropdown when another property of the component this.clearAfterSelect is true.
user_22720860
Related