Blur Event Does not get Fired in IE7 and IE6

javascript jquery internet-explorer onblur
yeshvanthni picture yeshvanthni · Aug 14, 2009 · Viewed 8.9k times · Source

I have a dropdown Menu where in a div is clicked and List is shown.

On focus out I am supposed to hide the list(i.e. when the user clicks or focuses on some other element and not on mouse out). Hence my obvious choice was onblur.

Now the JavaScript seems to work in Firefox but not in IE thats because my div has a sub div with a height and width specified. This is reproducible in a test file. I am using jQuery.

Is this a 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>

Answer

Nate picture Nate · Aug 24, 2009

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 could always bind to both the blur and focusout events.

Related questions

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

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 …

Read More
Javascript/JQuery: how to add keypress/blur event that doesn't trigger twice with alert box? IE only

I have an input field that I would like to validate on when the user either presses enter or clicks away from it, for this I use the events keypress and blur. If the input fails validation, an alert box …

Read More
Check if user is using IE

I am calling a function like the one below by click on divs with a certain class. Is there a way I can check when starting the function if a user is using Internet Explorer and abort / cancel it if …

Read More