6

我有一个下拉菜单，在其中单击 div 并显示列表。

在聚焦时，我应该隐藏列表（即当用户单击或聚焦于其他元素而不是鼠标移出时）。因此，我的明显选择是onblur。

现在 JavaScript 似乎可以在 Firefox 中工作，但不能在 IE 中工作，因为我的 div 有一个指定高度和宽度的子 div。这可以在测试文件中重现。我正在使用 jQuery。

这是 Internet Explorer 中的已知问题吗？解决方法是什么？

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

6 回答 6

7

IE 专有focusout活动对我有用：

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

同样，这是专有的（请参阅quirksmode），但如果它可以解决您的问题，则可能是合适的。您总是可以同时绑定到blur和focusout事件。

于 2009-08-24T18:50:54.617 回答
2 
onkeypress="this.blur(); return false;"

它适用于所有 IE 版本

于 2010-10-28T06:54:34.753 回答
1

尝试使用锚标记而不是 div，因为它们很容易聚焦。您可以将锚的 href 设置为“javascript:void(0)”以防止它实际链接到页面并使用 css 属性“display:block”使其呈现为 div。像这样的东西：

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

还没有测试过，但我认为它应该可以工作。

于 2009-08-24T14:24:55.597 回答
1

首先要意识到，focus事件blur仅在可聚焦元素上受支持。为了使您<div>的焦点集中，您需要查看tabindex属性。

于 2009-08-14T14:19:36.287 回答
0

我已经将 div 的 tabIndex 属性设置为可聚焦的，此外，如果我评论了触发模糊事件的高度，所以我认为这不是问题。

于 2009-08-17T07:14:55.360 回答
0

尝试：

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

您还可以制作另一个技巧 - 处理所有鼠标单击或/和焦点事件，如果选择了另一个控件，那么您自己的控件会变得模糊（当然，如果之前选择了它）。

于 2009-08-14T12:38:45.750 回答