Desenfoque al disparar el mouseout en Internet Explorer 7

Question

Tengo un cuadro de búsqueda emergente que se muestra cuando el usuario pasa el mouse sobre un hipervínculo, cuando el usuario sale del cuadro de búsqueda, el cuadro desaparece. Esto funciona bien Cuando el cuadro de texto tiene foco, se supone que el cuadro de búsqueda permanecerá visible hasta que el cuadro de texto pierda el foco, momento en el cual el cuadro se ocultará si el cursor no está sobre el cuadro. Esto funciona bien en todos los navegadores, excepto IE (IE7 para ser específico). En IE, el evento de desenfoque del cuadro de texto se dispara al pasar el mouse del cuadro de texto ocultando efectivamente el cuadro de búsqueda. Aquí está el código que he escrito:

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

Y aquí está el 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

El problema parece ser que está volviendo a vincular eventos sin desvincularlos. Entonces, termina habiendo múltiples eventos que disparan mostrando y ocultando la caja dependiendo de cuántas veces haya ocurrido el evento de enfoque y desenfoque. No estoy exactamente seguro de por qué falla en IE por alguna razón, pero la solución parece tener demasiadas partes móviles, por lo que es difícil saber exactamente dónde está fallando.

He podido hacer que este tipo de cosas funcionen en el pasado mediante el uso de un atributo que mantiene el estado del cuadro de texto (enfocado o borroso). Prueba esto:

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