Flou déclenché par la souris dans Internet Explorer 7

Question

J'ai une boîte de recherche contextuelle qui s'affiche lorsque l'utilisateur passe la souris sur un lien hypertexte, lorsqu'il disparaît de la zone de recherche. Cela fonctionne bien. Lorsque la zone de texte a le focus, la zone de recherche est censée rester visible jusqu'à ce que la zone de texte perde le focus. La zone est alors masquée si le curseur ne se trouve pas au-dessus de la zone. Cela fonctionne bien dans tous les navigateurs sauf IE (IE7 pour être spécifique). Dans IE, l'événement de flou de la zone de texte est déclenché lorsque la souris se détache de la zone de texte, masquant ainsi la zone de recherche. Voici le code que j'ai écrit:

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

Et voici le code 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

Le problème semble être que vous reliez des événements sans les relier. Donc, il y a plusieurs événements qui déclenchent l'affichage et le masquage de la boîte en fonction du nombre de fois que l'événement de mise au point et de flou s'est produit. Je ne suis pas tout à fait sûr de la raison pour laquelle il échoue dans IE pour une raison quelconque, mais la solution semble comporter trop de pièces mobiles, il est donc difficile de dire exactement où elle échoue.

Par le passé, j’ai réussi à faire fonctionner ce genre de chose en utilisant un attribut qui maintient l’état de la zone de texte (focalisé ou flou). Essayez ceci:

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