在 Internet Explorer 7 中鼠标悬停时模糊触发答案

【问题标题】：Blur firing on mouseout in Internet Explorer 7在 Internet Explorer 7 中鼠标悬停时模糊触发
【发布时间】：2009-04-30 19:19:06
【问题描述】：

我有一个弹出搜索框，当用户将鼠标悬停在超链接上时，当用户将鼠标移出搜索框时，该框就会消失。这工作正常。当文本框有焦点时，搜索框应该保持可见，直到文本框失去焦点，此时如果光标不在框上，框将隐藏。这适用于除 IE 之外的所有浏览器（具体为 IE7）。在 IE 中，文本框的 blur 事件在文本框的 mouseout 时触发，有效地隐藏了搜索框。这是我写的代码：

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

【问题讨论】：

标签： javascript jquery html internet-explorer-7 onblur

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：