Blur feuern auf Mouseout in Internet Explorer 7

Question

Ich habe ein Popup-Suchfeld, das angezeigt wird, wenn der Benutzer Mouses über einen Hyperlink, wenn der Benutzer mauset aus dem Suchfeld, verschwindet die Box. Das funktioniert gut. Wenn das Textfeld den Fokus hat, soll das Suchfeld sichtbar bleiben, bis das Textfeld den Fokus verliert. Zu diesem Zeitpunkt wird die Box ausgeblendet, wenn sich der Cursor nicht über dem Feld befindet. Dies funktioniert gut in allen Browsern außer IE (IE7, um genau zu sein). In IE wird das Blur-Ereignis des Textfelds ausgelöst, wenn das Textfeld nicht angezeigt wird. Dadurch wird das Suchfeld ausgeblendet. Hier ist der Code, den ich geschrieben habe:

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

Und hier ist der 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

Das Problem scheint zu sein, dass Sie Ereignisse rebinding ohne sie unverbindlich. Es gibt also mehrere Ereignisse, die das Anzeigen und Verbergen der Box auslösen, abhängig davon, wie oft das Fokus- und Blur-Ereignis passiert ist. Ich bin mir nicht ganz sicher, warum es aus irgendeinem Grund in IE versagt, aber die Lösung scheint zu viele bewegliche Teile zu haben, so dass es schwer ist, genau zu sagen, wo es scheitert.

Ich konnte diese Art von Sache in der Vergangenheit arbeiten, indem Sie ein Attribut verwenden, das den Status des Textfelds (fokussiert oder unscharf) beibehält. Probieren Sie dies aus:

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