Blur event triggered on scrolling div on IE

Question

I have a text box where, as soon as the user types something, some sentences appear above the text box. These sentences are wrapped inside a "div" and can scroll if they exceed a certain height.

inputFld.on("blur", function(){ //Some code to close the suggestion div if clicked outside inputFld (with check for click on any suggestion item) }); 

Thus, what the previous code does, if the click is outside of inputFld, it will hide the wrapper of the "sentences" div.

Now the problem is that there are a lot of sentence suggestions, and I get the scroll bar. If I try to scroll through elements in IE, the blur event will fire and close the wrapper of div sentences.

However, this does not happen in other browsers.

How can I handle this in IE?

Answer 1

You can try to catch all the clicks and check if there was a click on anything other than your div clause:

 $("body").bind('click', function(e) { var target_div_id = e.target.id; //get ID of clicked element if (target_div_id !== 'suggestion_div') { //check whether clicked element = suggestion_div $('#suggestion_div').hide(); } });