在Internet Explorer 7中鼠标点击模糊射击

Question

我有一个弹出式搜索框，当用户鼠标悬停在超链接上时，当用户鼠标移出搜索框时，框会消失。这工作正常。当文本框具有焦点时，搜索框应保持可见状态，直到文本框失去焦点，此时如果光标不在框上方，该框将隐藏。这适用于除IE以外的所有浏览器（IE7具体）。在IE中，文本框的模糊事件是在鼠标悬停搜索框的文本框上触发的。这是我写的代码：

<script type="text/javascript"> 
    $(document).ready(function() { 
     //add mouseover event to the search button to show the search box 
     $(".search").mouseover(
      function() { 
       $(".open").show(); 
      }); 

     //add mouseout event to the search button to show the hide box 
     $(".search").mouseout(
      function() { 
       $(".open").hide(); 
      }); 

     //add mouseover event to the search box so it doesnt hide when the user attempts to click the box 
     $(".open").mouseover(
      function() { 
       $(".open").show(); 
      }); 

     //add mouseout event to the search box so it doesnt hides when the users mouse exits the box 
     $(".open").mouseout(
      function() { 
       $(".open").hide(); 
      }); 

     //don't ever hide the search box when the textbox has focus 
     $("#tbSearch").focus(
      function() { 
       $(".open").mouseout(
        function() { 
         $(".open").show(); 
        }); 
      }); 

     //hide the search box when the textbox loses focus 
     $("#tbSearch").blur(
      function() { 
       $(".open").hide(); 
       $(".open").mouseout(
        function() { 
         $(".open").hide(); 
        }); 
      }); 


    }); 
</script> 

这里是HTML：

<a class="search" href="#"><span>Search</span></a> 
<div class="open"> 
    <input id="tbSearch" type="text" /> 
    <a class="go" href="#"><span>Go</span></a> 
</div> 

Answer 1

这个问题似乎是您正在重新绑定事件不必解除他们。所以，最终会出现多个事件，根据聚焦和模糊事件发生的次数来显示和隐藏框。我不确定为什么它出于某种原因在IE中失败，但是解决方案似乎有太多的移动部件，因此很难确切地说出它失败的位置。

我已经能够通过使用保持文本框状态（聚焦或模糊）的属性来获得这种类型的东西在过去的工作。尝试了这一点：

<script type="text/javascript"> 

$(function() { 

var showBox = function() { 
    $(".open").show(); 
}; 
var hideBox = function() { 
    if (!$(".open").attr("searching")) { 
     $(".open").hide(); 
    } 
}; 

$(".search").hover(showBox, hideBox); 
$(".open").hover(showBox, hideBox).hide(); 

    $("#tbSearch").focus(function() { 
    $(".open").attr("searching", "true"); 
    }).blur(function() { 
    $(".open").removeAttr("searching"); 
    $(".open").hide(); 
}); 
}); 

</script> 

Answer 2

<script type="text/javascript"> 
    $(document).ready(function() { 
     //add mouseover event to the search button to show the search box 
     $(".search").bind('mouseenter mouseleave',function(){ 
       $(".open").toggle(); 
     }); 

     //add mouseover event to the search box so it doesnt hide when the user attempts to click the box 
     $(".open").bind('mouseenter mouseleave',function(){ 
       $(".open").toggle(); 
     }); 

     //don't ever hide the search box when the textbox has focus 
     $("#tbSearch").focus(function() { 
       $(".open").show(); 
     }); 

     //hide the search box when the textbox loses focus 
     $("#tbSearch").blur(
      $(".open").hide(); 
     }); 

    }); 
</script>