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