Blur Brennen auf mouseout in Internet Explorer 7

Question

Ich habe ein Popup-Suchfeld, das angezeigt wird, wenn der Nutzer die Maus über einen Hyperlink, wenn der Nutzer die Maus aus dem Suchfeld, verschwindet die Box. Dies funktioniert gut. Wenn das Textfeld den Fokus hat, wird das Suchfeld soll sichtbar bleiben, bis das Textfeld den Fokus verliert, zu welcher Zeit versteckt der Box, wenn sich der Cursor nicht über die Box ist. Das funktioniert gut in allen Browsern außer IE (IE7 spezifisch zu sein). Im IE wird die Unschärfe Ereignis der Textbox auf mouseout der Textbox gefeuert effektiv in das Suchfeld versteckt. 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 die 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. Also, es endet mehrere Ereignisse zu sein, die das Feld feuern Ein- und Ausblenden je nachdem, wie oft der Fokus und Unschärfe Ereignis passiert. Ich bin mir nicht ganz sicher, warum es aus irgendeinem Grunde in IE versagt, aber die Lösung scheint zu viele beweglichen Teile zu haben, so dass es schwierig ist, genau zu sagen, wo es versagt.

ich in der Lage gewesen, diese Art der Sache zu bekommen in der Vergangenheit zu arbeiten, indem sie ein Attribut, das den Zustand der Textbox hält (fokussiert oder unscharf). Versuchen Sie, diese 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>