Borrão atirando em mouseout no Internet Explorer 7

Question

Eu tenho uma caixa de pesquisa de contexto que é mostrado quando o usuário mouses sobre um hiperlink, quando o usuário mouses fora da caixa de pesquisa, a caixa desaparece. Isso funciona bem. Quando a caixa de texto tem o foco, a caixa de pesquisa é suposto ficar visível até que a caixa de texto perde o foco, no momento em que a caixa vai esconder se o cursor não estiver sobre a caixa. Isso funciona bem em todos os navegadores, exceto IE (IE7 para ser mais específico). No IE, o evento borrão da caixa de texto é disparado em mouseout da caixa de texto escondendo eficazmente caixa de pesquisa. Aqui está o código que tenho 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>

E aqui está o 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

O problema parece ser que você está religação eventos sem desvinculação-los. Assim, não acaba sendo vários eventos que o fogo mostrar e ocultar a caixa, dependendo de quantas vezes o evento de foco e desfoque ter acontecido. Eu não sou exatamente certo porque ele está falhando no IE, por algum motivo, mas a solução parece ter muitas peças móveis por isso é difícil dizer exatamente onde ele está falhando.

Eu tenho sido capaz de obter este tipo de coisa para o trabalho no passado, usando um atributo que mantém o estado da caixa de texto (focada ou desfocada). Tente isto:

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