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