Seems that onBlur of one element is “overriding” the onclick of another

Question

I have two elements:

Answer 1

I think you are short on answers because your question is confusing. Presumably you have an input that, when focussed, shows a list of suggestions based on the characters entered into the input.

If the user uses the cursor to select an item, then I suppose the blur event of the input fires before the click event of the div and the the div is set to display:none before the click fires, and hence misses the div.

The fix is to call the onblur listener after a short timeout, so:

Test in a number of browsers, you may need to set the timeout to 200ms or so. It doesn't matter if there's a short, visible delay after the blur event before the suggestions disappear (i.e. a bit too long is better than a bit too short).

Make sure the suggestions don't obscure anything important on the page or users may find them more of a hindrance than a help. :-)