Blur Event Does not get Fired in IE7 and IE6

2019-02-07 09:59发布

站内问答 / JavaScript
1622 6 4

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>

6条回答
Juvenile、少年°
2楼-- · 2019-02-07 10:04

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.

查看更多
0人赞 添加讨论(0) 举报
傲
3楼-- · 2019-02-07 10:04

Try:

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

Also you can make another trick - handle all mouse clicks or/and focus events and if some another control is selected, then your own is blurred (of course if it was selected previously).

查看更多
0人赞 添加讨论(0) 举报
▲ chillily
4楼-- · 2019-02-07 10:07

I have set the tabIndex property for the div to be focusable and moreover if i comment the height the blur event is fired so I assume thats not the problem.

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
5楼-- · 2019-02-07 10:11 
onkeypress="this.blur(); return false;"

its works fine on all IE versions

查看更多
0人赞 添加讨论(0) 举报
等我变得足够好
6楼-- · 2019-02-07 10:12

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

查看更多
0人赞 添加讨论(0) 举报
可以哭但决不认输i
7楼-- · 2019-02-07 10:14

Try using an anchor tag instead of a div since these are naively focusable. You can set the href of the anchor to "javascript:void(0)" to prevent it from actually linking to a pageand use the css property "display: block" to make it render like a div. Something like this:

<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>

Haven't tested this, but I think it should work.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)