Sfocatura attiva al passaggio del mouse in Internet Explorer 7

Question

Ho una casella di ricerca popup che viene visualizzata quando l'utente passa il mouse su un collegamento ipertestuale, quando l'utente esce dalla casella di ricerca, la casella scompare. Funziona benissimo. Quando la casella di testo ha lo stato attivo, la casella di ricerca dovrebbe rimanere visibile fino a quando lo spazio non viene disattivato, a quel punto la casella si nasconderà se il cursore non si trova sopra la casella. Funziona bene in tutti i browser tranne IE (IE7 per essere specifici). In IE, l'evento sfocatura della casella di testo viene generato al passaggio del mouse sulla casella di testo nascondendo efficacemente la casella di ricerca. Ecco il codice che ho scritto:

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

Ed ecco l'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

Il problema sembra essere che si stanno unificando gli eventi senza separarli. Quindi, ci sono più eventi che sparano mostrando e nascondendo la scatola a seconda di quante volte si sono verificati l'evento di messa a fuoco e sfocatura. Non sono esattamente sicuro del motivo per cui sta fallendo in IE per qualche motivo, ma la soluzione sembra avere troppe parti mobili, quindi è difficile dire esattamente dove sta fallendo.

Sono stato in grado di far funzionare questo tipo di cose in passato usando un attributo che mantiene lo stato della casella di testo (focalizzato o sfocato). Prova questo:

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