Geek Answers Handbook

Blur Event Does Not Trigger in IE7 and IE6

I have a drop down menu where the div button is clicked and a list is displayed.

In focus, I have to hide the list (i.e. when the user clicks or focuses on some other element, not the mouse). Therefore, my obvious choice was onblur .

JavaScript now works in Firefox, but not in IE, because my div has a sub div with the specified height and width. This is reproduced in a test file. I am using jQuery.

Are these known issues in Internet Explorer? And what is the work around?

 <html> <head> <title>Exploring IE</title> <style type="text/css"> /** Exploring IE**/ .selected_option div {height:18px;} </style> <script type="text/javascript" src="jquery-1.3.2.min9919.js"></script> <script type="text/javascript"> $().ready(function(){ $('.selected_option').blur(function(){ alert('blurred'); }); }); </script> </head> <body> <div class="selected_option" tabindex="0"> <div>anywhere in the page</div> </div> </body> </html>
+6
javascript jquery internet-explorer onblur
source share
6 answers

The IE-proprietary focusout event worked for me:

 $('.selected_option').bind('focusout', function(){ alert('focusout'); });

Again, this is proprietary (see quirksmode ), but may be appropriate if it solves your problem. You can always bind to blur and focusout .

+7
source share
 onkeypress="this.blur(); return false;"

works fine in all versions of IE

+2
source share

First, make sure that focus and blur events are supported only on custom elements . To make your <div> focusable, you need to look at the tabindex property.

+1
source share

Try using an anchor tag instead of a div, as they are naively customizable. You can set the href bindings to "javascript: void (0)" to prevent the actual link to the page and use the css property "display: block" to render it as a div. Something like that:

 <html> <head> <title>Exploring IE</title> <style type="text/css"> /** Exploring IE**/ .selected_option { display: block; height:18px; } </style> <script type="text/javascript" src="jquery-1.3.2.min9919.js"></script> <script type="text/javascript"> $().ready(function(){ $('.selected_option').blur(function(){ alert('blurred'); }); }); </script> </head> <body> <a href="javascript:void(0)" class="selected_option">anywhere in the page</a> </body> </html>

Not tested this, but I think it should work.

+1
source share

Try:

 $('.selected_option').bind('blur', function(){ alert('blurred'); });

You can also do one more trick: handle all mouse clicks and / or focus events, and if any other control is selected, then your own is blurred (of course, if it was selected earlier).

0
source share

I set the tabIndex property so that the div is configured, and also, if I comment on the height, the blur event is fired, so I assume this is not a problem.

0
source share

More articles:


All Articles