Internet Explorer에서 마우스 아웃에서의 발사 흐름. 7

Question

사용자가 하이퍼 링크 위에 마우스를 뿌릴 때 표시되는 팝업 검색 상자가 있습니다. 사용자가 검색 상자 밖으로 나가면 상자가 사라집니다. 이것은 잘 작동합니다. 텍스트 상자에 초점이 맞으면 텍스트 상자가 초점을 잃을 때까지 검색 상자가 표시되어야합니다. 이때 커서가 상자 위에 있지 않으면 상자가 숨어집니다. 이것은 IE를 제외한 모든 브라우저에서 잘 작동합니다 (IE7은 구체적입니다). IE에서 텍스트 상자의 블러 이벤트는 검색 상자를 효과적으로 숨기는 텍스트 상자의 마우스 아웃에서 시작됩니다. 다음은 내가 작성한 코드입니다.

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