Internet Explorer 7でのマウスアウトでの発射のぼかし

Question

ユーザーがハイパーリンク上にマウスを置いたときに表示されるポップアップ検索ボックスがあり、ユーザーが検索ボックスからマウスを出すと、ボックスが消えます。これは正常に機能します。テキストボックスにフォーカスがある場合、テキストボックスがフォーカスを失うまで検索ボックスは表示されたままになり、カーソルがボックス上にない場合、ボックスは非表示になります。これは、IE（IE7を特定する）を除くすべてのブラウザーでうまく機能します。 IEでは、テキストボックスのblurイベントは、テキストボックスのマウスアウトで発生し、検索ボックスを事実上非表示にします。これが私が書いたコードです：

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

そして、これが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

問題は、イベントをアンバインドせずに再バインドしているようです。そのため、フォーカスイベントとブラーイベントが発生した回数に応じて、ボックスを表示および非表示にする複数のイベントが発生します。何らかの理由でIEでエラーが発生する理由は正確にはわかりませんが、ソリューションには可動部分が多すぎるようであるため、エラーが発生している場所を正確に特定することは困難です。

テキストボックスの状態（フォーカスまたはぼかし）を維持する属性を使用することで、過去にこのタイプの機能を動作させることができました。これを試してください：

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